Favicon 不能在根网站上运行，并且只能在刷新后在特定站点上运行答案

【问题标题】：Favicon isn't working on root website and only works on specific sites after refreshingFavicon 不能在根网站上运行，并且只能在刷新后在特定站点上运行
【发布时间】：2015-03-22 20:34:51
【问题描述】：

在我的 index.php 文件中，我有：

<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />

在资产/图像中，我有两个文件（“favicon-16x16.png”和“favicon-32x32.png”）。我究竟做错了什么？

此外，当我转到网站上的特定页面并刷新时，我会看到网站图标。但它不会显示在根页面上，如果我刷新它只会显示在其他一些页面上。

我注意到的另一件事是，当我的 index.php 文件被称为 index.html 时，这个问题并没有发生。但是我必须将文件命名为 index.php，因为我是通过 Heroku 托管的。

【问题讨论】：

标签： html css favicon

【解决方案1】：

favicon rel 应定义为rel="shortcut icon"，如下所示：

还要确保每个页面的路径文件都是正确的。如果您的根文件位于同一目录中，即在您的 assets 文件夹中，那么上面更新的代码应该可以工作，但如果您的索引在您的资产文件夹之外，那么您需要将您的 favicon 路径文件更改为类似 href="assets/images/favicon-32x32.png"

【讨论】：

【解决方案2】：

不确定是什么导致了这个问题，但这里有一个清单：

使用绝对路径，例如。 /images/favicon-32x32.png，而不是相对路径，例如。 images/favicon-32x32.png。否则，您可能会因为不同目录中的页面而遇到问题。
确保您的链接有效。例如，如果您的 HTML 代码包含<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">，而您的网站是http://example.com，则在浏览器的地址栏中输入http://example.com/images/favicon-16x16.png：它会显示图标吗？
浏览器在网站图标缓存方面非常严格。如果未正确配置图标，您的浏览器可能仍会显示它，因为它在（成功）上一次尝试期间缓存了它。即使网站图标配置正确，您的浏览器也可能不会显示它，至少不会立即显示，因为之前的尝试失败。作为一种解决方法，您可以将一种版本添加到您的 URL。例如，<link rel="icon" type="image/png" href="/images/favicon-16x16.png?v=2" sizes="16x16"> 并在您尝试其他方法时更改它。这将迫使您的浏览器考虑该图片，无论之前遇到什么。
由于同样的缓存问题，您可能需要尝试使用其他浏览器，以确保您的缓存没有混乱。
在调试您的网站图标时，显示浏览器的网络日志（使用 Firefox 的 Firebug、使用 Chrome 的开发工具...）和/或您的服务器的日志（例如使用 Apache 的 access.log）以了解发生了什么。同样，这可能会暴露出可怕的缓存问题：您尝试了很多事情，但您的浏览器不会重新加载任何内容。
浏览器在本地环境中关于网站图标的行为可能不同。您是否直接访问您的文件，即。从文件系统？如果是这样，我建议您切换到 Web 服务器环境。

【讨论】：