图标不会显示在标签上

Question

使用 converticon.com，我将我的图标 png 文件转换为 ico 文件。我将以下代码放在我的头部标签中：

<link rel="shortcut icon" href="icons/icon.ico">

我仔细检查过，文件位于适当的位置。图像具有读取和写入功能。然后我在浏览器上加载了该页面，但我得到的只是一个带有虚线边框的空方框。我正在使用 XAMPP 服务器。为什么图片不显示？

Answer 1

在 MAMP（假设 XAMP 相同/相似）中，您将执行以下操作：

- With MAMP running/open, hit the "Stop" button.
- Then go to: File > Edit Template > Apache httpd.conf
- Comment out lines:
    #Alias /favicon.ico "/Applications/MAMP/bin/favicon.ico"
    #Alias /icons/ "/Applications/MAMP/Library/icons/"
- Place your favicon.ico file in your site's root directory
- Start MAMP

你可以在这里做各种疯狂的事情。就个人而言，在开发过程中从不担心网站图标。

顺便说一句 - 您不必完全清除浏览器的缓存。只需浏览到 favicon 并刷新它.... localhost:8888/favicon.ico

Answer 2

您是否尝试在多个浏览器上对此进行测试？不同的浏览器处理网站图标的方式不同。

这里有一些你可以尝试的方法。

清除缓存

• 删除收藏夹中链接的所有引用。
• 清除浏览器中的文件缓存。
• 关闭目标浏览器的所有实例。
• 重新打开浏览器并导航到您的网站。

强制刷新

• 如果您使用的是 Mozilla Firefox，那么您应该：
• 导航到您的网站
• 导航到收藏图标的确切位置，例如。 www.site.com/favicon.ico。
• 在浏览器窗口中单击鼠标右键并选择刷新。

完成后，Firefox 会强制重新加载图标而不是缓存版本。

浏览器的默认行为

指定网站图标的第二种方法依赖于使用预定义的 URI 来识别图像：“/favicon.ico”，它是相对于服务器根目录的。此方法有效，因为某些浏览器已被编程为使用该 URI 查找网站图标，因此我建议将网站图标放在根目录中，看看是否有效。 （也将图标重命名为 favicon.ico）。

<link rel="shortcut icon"  href="/favicon.ico" type="image/x-icon"/> 

图像格式

有时网站图标的格式存在问题。如果您在所有网络浏览器中都遇到问题，您可以将网站图标转换为 gif 或 png 并查看是否可以解决问题。

强制浏览器更新网站图标

您可以通过传递 URL 参数来强制浏览器更新您的网站图标。使用 ver 参数，您可以在每次要强制下载新文件时增加版本号。

将此添加到您的标记中。

<link rel="shortcut icon"  href="/favicon.ico?ver=2.0" type="image/x-icon"/>

Answer 3

只需将 favicon 放在您网站的根目录，例如“example.com/favicon.ico”（但请确保将其命名为 favicon.ico），然后完全删除上述链接元素。如果不存在，浏览器将默认检查此位置是否有网站图标，即使是 IE。

完成此操作后，请务必在测试时清除缓存。

Answer 4

尝试添加type 属性。示例：

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">