Question

我的head标签中没有包含以下代码行，但我的favicon仍然出现在我的浏览器中：

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

包含它的目的是什么？

Answer 1

如果您不调用favicon，favicon.ico，您可以使用该标记指定实际路径（如果您在images/目录中拥有它）。默认情况下，浏览器/网页会在根目录中查找favicon.ico。

Answer 2

事实上，您应该同时执行这两项操作，以便所有浏览器都能找到该图标。

命名文件“favicon.ico”并将其放在网站的根目录中是W3C“劝阻”的方法：

方法2（不鼓励）：将favicon放在预定义的URI上用于指定favicon的第二种方法依赖于使用预定义的URI来标识图像：“/ favicon”，其相对于服务器根。此方法有效，因为某些浏览器已编程为使用该URI查找favicons W3C - How to add a favicon to your site

因此，为了涵盖所有情况，除了添加“rel”属性并将其指向同一.ico文件的推荐方法之外，我总是这样做。

Answer 3

我使用它有两个原因：

我可以通过添加查询参数（例如?v=2）来强制刷新图标。像这样： <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" />
如果我需要指定路径。

Answer 4

只需将它添加到根文件夹就可以了，但我发现如果我需要更改图标，可能需要几天才能更新...即使缓存刷新也无法解决问题。 / p>

Answer 5

很多人将他们的cookie路径设置为/。这将导致每个favicon请求发送网站cookie的副本，至少在chrome中。将您的favicon发送到您的无cookie域名应该纠正这一点。

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

根据您获得的流量，这可能是添加链接的最实际原因。

有关设置无Cookie域的信息：

http://www.ravelrumba.com/blog/static-cookieless-domain/

Answer 6

我有三个原因来包含链接。

我在根本上有一个WordPress网站。我想要在子目录中部署react构建。因此，我无法将favicon.ico放在根目录中，而不得不添加链接以使其正常工作。
我不想使用.ico，而正在使用.png。
我宁愿添加多个尺寸来为渲染设备提供选择。

所以，我最终得到了这样的东西

<link rel="icon" type="image/png" sizes="48x48"   href="favicon-48.png">
<link rel="icon" type="image/png" sizes="96x96"   href="favicon-96.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon-144.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon-256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon-384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon-512.png">

你必须包括<link rel =“icon”href =“favicon.ico”type =“image / x-icon”/>？

6 个答案: