想在我的网站上添加 android chrome 的主屏幕图标

Question

I want to add custom icon for website Built in Angular 10 homescreen menu after adding it to home screen from chrome Add to Homescreen menu

I have achived this in Iphone using this code <link rel="apple-touch-icon" sizes="71x71" href="assets/icons/homescreen-icon/group.png" />

But i am not able to figure out how to make it working for android. I tried following things for android but none of them works

<link rel="icon" type="image/png" href="assets/icons/homescreen-icon/group.png" /> <link rel="shortcut icon" href="assets/icons/homescreen-icon/group.png" /> <link rel="mask-icon" href="assets/icons/homescreen-icon/group.png" />

Answer 1

Try changing the type of link from img/png to simple img as:

<link rel="icon" type="image" href="assets/icons/homescreen-icon/group.png" /> <link rel="shortcut icon" href="assets/icons/homescreen-icon/group.png" /> <link rel="mask-icon" href="assets/icons/homescreen-icon/group.png" />

Answer 2

I achieved this using these two line of code

<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link rel="apple-touch-icon" href="assets/icons/homescreen-icon.png" />

for android shortcut icon should be .ico file.

Answer 3

The below tag worked for me for both ios/ android on Angular 10 application in index.html file.

Note: make sure to follow the href path as below (in assets folder).

<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon-150x150.png" />