想要在我的网站中添加 Android chrome 的主屏幕图标

Question

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

Add to Homescreen

菜单

我已经使用此代码在 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" />

Answer 1

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

<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 2

下面的标签对我来说适用于index.html文件中Angular 10应用程序的ios/android。

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

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

Answer 3

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