android 的 chrome 中未出现网站图标 (rel=icon)

Question

我网站的每个页面上都有这个代码。

<link rel="icon" sizes="192x192" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" />

然而，当我在 Chrome 上访问我的网站 Android 并点击 "Add to home screen" 时，我的图标从未出现在对话框中。我的图片尺寸正确并且存在。

这是怎么回事？

I have used this documentation from Google.

更新

我的网站是http://compesh.com 查看页面源代码，看看我是否犯了任何错误。

它适用于 Android 的 Firefox，但不适用于 Android 的 Chrome 和 Windows 的 Chrome。我在 Firefox WebIDE 中看到了这个

第二次更新 Windows 的 Firefox 没有在选项卡中显示我的图标图像。相反，它显示了错误的图像并将其缩小到 16x16 像素，而不是使用我在网页中指定的 16x16 图标。

Answer 1

由于您使用的是 png 文件作为高分辨率图标，能否尝试添加类型属性，如下所示：

<link rel="icon" type="image/png" href="http://compesh.com/assets/graphics/touch-icon-chrome.png" sizes="192x192" />

这有助于将其区分为 png 文件而非常规 favicon.ico 文件。

Answer 2

我也调查了这个，我找到的一个解决方案是制作 4 种不同的尺寸，并使用 rel="apple-touch-icon" 对它们进行 link。它已在 iPhone、iPad、Android 和黑莓上测试：

<link rel="apple-touch-icon" sizes="57x57" href="../images/YourIconName57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../images/YourIconName.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../images/YourIconName.png" />

Answer 3

嘿，试试这个就去 https://www.favicon-generator.org 并选择您的文件并单击创建图标。

现在下载 rar 文件并提取项目文件所在的位置，然后复制下面的代码

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

现在刷新浏览器或换个浏览器试试

Answer 4

在您的 href 中试试这个：

http://compesh.com/assets/graphics/touch-icon-chrome.png?v=2

你看到“?v=2”直接清除缓存

Answer 5

哥们你用的是html4，为什么不用html5.
并且在 href="/" 中没有必要给出完整的 path/link。在你的代码中只需做一些小改动。希望对你有所帮助
我想@sarvesh 已经向你解释了一切

<link rel="icon" type="image" href="assets/graphics/favicon.png" sizes="16x16">

Answer 6

您的排名低于div（可能是错误的）

<div style="display: none;">

在

之后添加标签

<meta name="viewport" content="width=610">

在您的 head 标签中，这就是浏览器在 div 之前关闭您的 head 标签并且不显示网站图标的原因。把你脑子里的div去掉，一切都会好起来的。

Answer 7

试试这个：

<link href="https://compesh.com/assets/favigen/favicon-96x96.png" rel="icon" sizes="96x96" />

在我的 android phone 上运行良好。我测试了它 http://helledussen.com/test

android 的 chrome 中未出现网站图标 (rel=icon)

Website icon (rel=icon) not appearing in chrome for android

html

favicon

google-chrome