Ico 不会显示在选项卡上

Question

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

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

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

Answer 1

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

您可以尝试以下一些操作。

清除缓存

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

强制刷新

• 如果您使用 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 2

在 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