Favicon不在root网站上工作，只在刷新后才能在特定网站上运行

Question

在我的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”）。我究竟做错了什么？

此外，当我访问我网站上的特定页面并刷新时，我会看到favicon。但是它没有显示在根页面上，只有在我刷新时才显示在其他页面上。

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

Answer 1

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

并确保每个页面的路径文件都正确。如果您的根文件位于同一目录中，即在assets文件夹中，则上述更新的代码应该可以工作，但如果您的索引位于assets文件夹之外，那么您需要将您的favicon路径文件更改为{{{ 1}}

Answer 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：它是否显示图标？
• 浏览器对于favicon缓存非常强硬。如果未正确配置favicon，则浏览器可能仍会显示它，因为它在（成功）上一次尝试期间缓存了它。即使正确配置了favicon，由于先前尝试失败，您的浏览器可能无法显示，至少立即显示。作为解决方法，您可以向URL添加一种版本。例如，<link rel="icon" type="image/png" href="/images/favicon-16x16.png?v=2" sizes="16x16">并在您尝试其他内容时更改它。这将迫使您的浏览器无论以前遇到什么都会考虑图片。
• 由于同样的缓存问题，您可能想尝试使用其他浏览器，只是为了确保您的缓存没有搞乱。
• 在调试您的favicon时，显示您的浏览器的网络日志（使用Firefox的Firebug，使用Chrome的Dev工具......）和/或您的服务器日志（例如，使用Apache的access.log）来了解正在发生的事情。同样，这可能会揭示可怕的缓存问题：您尝试了很多东西，但浏览器不会重新加载任何内容。
• 浏览器在关于favicon的本地环境中可能会有不同的行为。你是直接访问你的文件，即。从文件系统？如果是这样，我建议您切换到Web服务器环境。