Question

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

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

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

Answer 1

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

以下是您可以尝试的一些事项。

清除缓存

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

强制刷新

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

完成此操作后，Firefox将被迫重新加载图标而不是缓存版本。

浏览器的默认行为

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

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

图片格式

有时，favicon的格式存在问题。如果您在所有Web浏览器中遇到问题，可以将favicon转换为gif或png，看看是否能解决问题。

强制浏览器更新favicon

您可以通过传递URL参数强制浏览器更新您的favicon。使用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

Answer 3

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

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

Answer 4

尝试添加type属性。例如：

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

Ico不会显示在选项卡上

4 个答案: