Html android浏览器中未出现网站图标（rel=图标）

我在我的网站的每一页上都有这个代码

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

然而，当我在Chrome for Android上访问我的网站并点击“添加到主屏幕”时，我的图标从未出现在对话框中。我的图像大小正确并且存在

发生了什么事

更新

我的网站是 查看页面来源，看看我是否犯了任何错误

它适用于Firefox for Android，但不适用于Chrome for Android和Chrome for Windows。我在FirefoxWebide中看到了这一点

第二次更新

---

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

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

---

这有助于区分它是一个png文件，而不是一个普通的favicon.ico文件。

我也研究了这个问题，我发现一个解决方案是制作4种不同大小的文件，并用rel=“apple touch icon”链接到它们。它已经在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" />

---

嘿，试试这个，去 然后选择您的文件并单击CreateFavicon

现在下载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"> 

---

现在刷新浏览器或在其他浏览器中尝试

在您的href中尝试以下内容：

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

---

如果您看到“？v=2”用于直接清除缓存，那么您使用的是HTML4，为什么不使用HTML5.
在href=“/”中，无需提供完整路径/链接。在代码中 做点小改动就行了。我希望它能帮助你。
我猜@sarvesh已经向你解释了一切

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

您已将其放置在div下面（可能是错误的）

紧跟其后

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

在头标签中，这就是为什么浏览器在div和favicon未显示之前关闭头标签。把那个div从你的头上拿开，一切都会好起来。

试试这个：

---

您是否尝试过将源代码更改为文件名？这假设您的资产与根目录位于同一目录中。我无法将

href

属性更改为仅显示文件名，因为这样我需要在不同文件夹中创建多个图像副本。是否清除了缓存？你有其他的iOS图标链接标签吗？我已经清除了缓存，删除了除谷歌chrome外的所有图标链接标签，但仍然不起作用。我还没有在iPhone上测试图标。请尝试修复这些错误，我已清除缓存并尝试了该操作，但无效。您是否确保您的图像完全是方形的？如果您将图标的高分辨率图像上载到此站点，它将生成一个包含所有图像的zip文件，并提供包含在标题中所需的HTML。我使用了带有方形图标的favicon generator，所有链接都没有断开，而且它在android的google chrome上仍然没有显示网站图标。div应该在那里。你是对的，

导致了这个问题。我已经改变了我的代码来移动东西来修复它。谢谢。我之所以在那里有

，首先是因为我在

标记中包含了javascript，该标记被称为内联，而不是URL。出于实用、技术和速度的原因，它必须是内联的。我使用

使

标记不可见，因为它会在我的网站设计中造成问题，因为它会添加额外的空间或填充。如果标记不可见，javascript仍将运行。为了让favicons正常工作，我不得不花几个小时更新代码，以同时解决这两个问题。谢谢你的帮助。你让我解决了这个问题。您现在可以删除测试页面。

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