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

Question

我想在从 chrome Add to Homescreen 菜单 Add to Homescreen 菜单

添加到主屏幕后，为内置 Angular 10 主屏幕菜单添加自定义图标

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

但我不知道如何让它为 android 工作。 我尝试了 android 的以下内容，但其中 none 有效

<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

尝试将 link 的类型从 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" />

Answer 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 文件。

Answer 3

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

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

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