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

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

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

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

为网站图标选择其他位置或文件类型（例如PNG或SVG）：
一个原因可能是您希望将图标放置在特定位置，例如图像文件夹或类似位置。例如：

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

就像SO似乎与一样，这个不同的位置甚至可能是CDN <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">。

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

为了清除缓存：
将查询字符串添加到路径中以清除缓存：

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

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

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

关于脚注rel="icon"：
如@Semanino的回答所示，使用rel="shortcut icon"是较旧的Internet Explorer版本所必需的旧技术，但在大多数情况下，可以用更正确的rel="icon"说明代替。@Semanino文章基于此正确链接到适当的规范，该规范显示rel值shortcut不是有效选项。

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

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

注意“ rel”属性的值！

值shortcut icon的rel属性是一个很老的Internet Explorer特定的扩展和过时。

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

您可能还想看看这篇很棒的文章：rel =“ shortcut icon”被认为是有害的

<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" />

这完全取决于您要使用哪种图像格式！
如果您有网站图标，则对UX会更好！

演示

在浏览器标签中显示徽标

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

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

最重要的是，并非所有浏览器都会实际查找您的favicon.ico文件。某些浏览器允许用户选择是否自动显示。因此，为了确保它始终出现并被查看，您必须对其进行定义。