favicon.ico需要添加链接标签吗？

Question

是否有任何现代浏览器无法自动检测 favicon.ico？有什么理由为 favicon.ico 添加链接标签吗？

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

我的猜测是，如果您决定使用 GIF 或 PNG，则只需将其包含在 HTML 文档中...

Answer 1

要为图标选择不同的位置或文件类型（例如PNG或SVG）：
原因之一可能是您希望将图标放在特定位置，例如图像文件夹或类似位置。例如：

<link rel="icon" href="_/img/favicon.png">

这个不同的位置甚至可能是 CDN，就像 SO 似乎与

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

所做的那样。

要了解有关使用其他文件类型（例如 PNG）的更多信息，请查看此问题。

用于缓存清除目的：
将查询字符串添加到路径以进行缓存清除：

<link rel="icon" href="/favicon.ico?v=1.1"> 

网站图标的缓存非常多，这是确保刷新的好方法。

---

关于默认位置的脚注：
至于问题的第一点：所有现代浏览器都会在默认位置检测到图标，所以这不是使用 link 的原因。

---

关于

rel="icon"的脚注：

正如 @Semanino 的回答
所示，使用 rel="shortcut icon" 是旧版本 Internet Explorer 所需的旧技术，但在大多数情况下可以用更正确的

rel="icon"

指令代替。

基于此的文章@Semanino

正确链接到适当的规范，该规范显示rel值

shortcut

不是有效选项。

Answer 2

请注意

，W3C 和 WhatWG 的 HTML5 规范标准化 <link rel="icon" href="/favicon.ico">

注意“rel”属性的值！

shortcut icon

属性的值

rel

是一个非常古老的 Internet Explorer 特定扩展，已弃用。 因此，请考虑不再使用它并更新您的文件，以便它们符合标准并在所有浏览器中正确显示。

您可能还想看看这篇很棒的文章：

rel =“快捷方式图标”被认为是有害的

Answer 3

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

这完全取决于您喜欢使用哪种格式的图像！

如果你有网站的图标，那么用户体验会更好！ 演示

在浏览器选项卡中显示徽标

Answer 4

因此，如果您在本页上摸不着头脑为什么我的图标不起作用，请继续阅读。我尝试了所有的方法（我认为我做得对），但浏览器选项卡上没有显示网站图标。

这里是

一行简单

完美运行的破解代码： <link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">

备注：

将图像放入

ROOT
1. 文件夹中（在我不成功的尝试之一中，我没有使用根目录） 使用直接图标
url 链接
2. （而不是 href="images/bla123.jpg"）。 我将此标签放在
标题
3. >标签下方<标题>中 <我将图标大小设置为64x64 px
，大小为2.16 KB
4. 我在 Firefox、Chrome、Edge 和 opera 上进行了测试。 操作系统：Win 10、Mac OSX、ios 和 Android。而且我没有遇到任何兑现问题，刷新页面后就可以正常工作了。

我们可以为所有具有平台特定尺寸的设备添加

Answer 5

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

底线是并非所有浏览器

Answer 6

实际上寻找您的

favicon.ico文件。某些浏览器允许用户选择是否自动查找。因此，为了确保它总是出现并被查看，你必须定义它。