想在我的网站中添加 android chrome 的主屏幕图标答案

【问题标题】：Want to add homescreen icon for android chrome in my website想在我的网站中添加 android chrome 的主屏幕图标
【发布时间】：2021-03-31 20:22:51
【问题描述】：

我想在从 chrome Add to Homescreen 菜单添加到主屏幕后，为网站内置 Angular 10 主屏幕菜单添加自定义图标

我已经使用此代码在 Iphone 中实现了这一点 <link rel="apple-touch-icon" sizes="71x71" href="assets/icons/homescreen-icon/group.png" />

但我无法弄清楚如何使其适用于 android。我尝试为 android 跟踪一些东西，但它们都不起作用

<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" />

【问题讨论】：

标签： android html angular google-chrome homescreen

【解决方案1】：

尝试将链接类型从 img/png 更改为简单的 img 为：

<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" />

【讨论】：

【解决方案2】：

我使用这两行代码实现了这一点

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

对于 android shortcut icon 应该是 .ico 文件。

【讨论】：

【解决方案3】：

下面的标签对我在 index.html 文件中的 Angular 10 应用程序上的 ios/android 都有效。

注意：请确保遵循以下 href 路径（在 assets 文件夹中）。

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

【讨论】：