是否需要为favicon.ico添加链接标记？

Question

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

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

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

Answer 1

为favicon选择不同的位置或文件类型（例如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等其他文件类型的详情，请查看this question。

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

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

Favicons的缓存非常高，这是确保刷新的好方法。

---

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

---

关于rel="icon"的脚注：
如@Semanino's answer所示，使用rel="shortcut icon"是旧版本的Internet Explorer所需的旧技术，但在大多数情况下可以用更正确的rel="icon"指令替换。 The article @Semanino based this on正确链接到the appropriate spec，其rel值shortcut不是有效选项。

Answer 2

请注意，W3C的HTML5规范和WhatWG 标准化

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

注意“rel”属性的值！

shortcut icon属性的值rel是一个非常旧的Internet Explorer特定扩展程序， 已弃用 。

因此，请考虑不再使用它并更新您的文件，使其符合标准并在所有浏览器中正确显示。

您可能还想看一下这篇精彩帖子：rel="shortcut icon" considered harmful

Answer 3

angular.element(document).ready(function () { ... }

这完全取决于您想要使用的图像格式！
如果你有一个网站的图标，那对用户体验会好得多！

Answer 4

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

<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 5

底线并非所有浏览器将实际查找您的 favicon.ico 文件。某些浏览器允许用户选择是否应自动查看。因此，为了确保始终出现并进行查看，您必须对其进行定义。

Answer 6

更新2020年10月：

因此，如果您在本页上挠头?为什么我的收藏夹无法正常工作，请继续阅读。我尝试了所有操作（我认为我做对了），但浏览器选项卡上没有显示favicon。

这是简单的一行破解程序代码，可完美运行：

<link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">

注意：

1. 将图像放入 ROOT 文件夹中（在我的一次不成功尝试中，我没有使用root目录）
2. 使用直接图标图标 URL链接（而不是href =“ images / bla123.jpg”）。
3. 我将此标签放在标题
中的标题>标签下方
4. 我将图标的大小设置为 64x64 px ，大​​小为2.16 KB

我在Firefox，Chrome，Edge和Opera上进行了测试。 操作系统：Win 10，Mac OSX，ios和Android。此外，刷新页面后，我也没有遇到任何兑现问题，因此可以正常工作。