是否有现代浏览器不会自动检测favicon.ico？是否有理由添加用于favicon.ico的链接标签？
<link rel="shortcut icon" href="/favicon.ico">
我的猜测是，如果您决定使用GIF或PNG格式，则只需要将其包含在HTML文档中...
6个回答
278
要选择PNG或SVG格式的不同位置或文件类型作为网站图标：
其中一个原因可能是您希望将图标置于特定位置，例如在images文件夹中或类似的位置。例如：
<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's answer所指出的那样，使用rel="shortcut icon"是一种旧技术，以前的Internet Explorer版本需要使用它，但在大多数情况下可以用更正确的rel="icon"替代。基于Semanino的文章恰当地链接到适当的规范，其中显示shortcut不是有效的rel选项。
- Jeroen
3
1这个应该放在<head>标签里吗？ - Max Williams
1@MaxWilliams 是的。（请参见 MDN 文档中的“允许的父元素”或 W3 规范中的“上下文”部分） - Jeroen
1现在是2016年，Chrome仍然（或者又一次？）无法识别根目录下的默认favicon.ico文件，如果你同时指定了其他图标。 - Sebastian G. Marinescu
57
请注意，W3C 和 WhatWG 的 HTML5 规范标准化了。
<link rel="icon" href="/favicon.ico">
请注意 "rel" 属性的值！
"rel" 属性的值 shortcut icon 是一个非常古老的 Internet Explorer 特定扩展而且已经被弃用。
因此，请考虑不再使用它并更新您的文件，以使它们符合标准并在所有浏览器中正确显示。
您可能还想查看这篇优秀的文章：关于rel="shortcut icon"的危害性
- Semanino
1
2并不完全是“已弃用”（它实际上从未成为任何规范的一部分）。然而，HTML5规范指出，“由于历史原因，图标关键字可能会在关键字“shortcut”之前。如果存在“shortcut”关键字，则必须紧接在图标关键字之前，并且两个关键字之间必须仅由单个U+0020 SPACE字符分隔。”还要注意，“没有默认类型适用于由图标关键字给出的资源。” - DocRoot
13
这完全取决于你想使用哪种图片格式！<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" />
如果您有网站图标，那对用户体验来说会更好一些！演示
在浏览器选项卡中显示标志
- xgqfrms
3
http://iconhandbook.co.uk/reference/examples/favicons/ 链接：https://mathiasbynens.be/notes/rel-shortcut-icon#comments 链接：https://html.spec.whatwg.org/multipage/semantics.html#rel-icon 链接： - xgqfrms
UX与此无关。 - paddotk
@paddotk 我的意思是，如果在浏览器中打开多个标签页时，如果标签页上显示了网站的 favicon 图标，用户就可以轻松地知道哪个标签页属于目标网站。 - xgqfrms
3
2020年10月更新:
如果您在这个页面上看到这段话还在为为什么我的网站图标(favicon)无法显示而苦恼，那么请继续阅读。我尝试了所有我认为正确的事情，但是favicon仍未出现在浏览器标签页中。
以下是一行简单的代码，完美解决了此问题:
<link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">
注意事项:
- 将图片放在根目录下(在我不成功的尝试中，我没有使用根目录)
- 使用直接的favicon链接(而非href="images/bla123.jpg")。
- 我将此标签放置在 <Header> 中 且刚好位于<title>标签下面
- 我将favicon大小设置为64x64像素，大小为2.16 KB
我在Firefox，Chrome，Edge和Opera上测试了它。操作系统：Win 10，Mac OSX，ios和Android。并且我没有遇到任何缓存问题，只要我刷新页面就很好用。
- zennni
1
确认图标大小确实会产生影响。 - Ronen Rabinovici
2
我们可以为所有平台特定大小的设备添加。
<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">
- Abhilash KK
1
底线是，并非所有的浏览器都会实际查找您的 favicon.ico 文件。一些浏览器允许用户选择是否应该自动查找。因此，为了确保它始终出现并被查看，您必须定义它。
- animuson
3
6谢谢您的评论，animuson。您能否列举一些不会自动查看的浏览器？ - user1087110
11我不是心中能立刻想到的，而且说实话谁在乎呢。重点是你不能假设一定会发生，你需要考虑那些不会发生的情况。 - animuson
由于它已经不再相关，您可以删除您的答案以清理页面。 - chickens
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
favicon.ico。因此，如果您想确保图标显示出来，最好在HTML中包含链接。顺便说一句，与可比较的.ico文件相比，.png文件通常更小。 - Mr Listerbrowser.chrome.favicons设置为true将在根目录中查找favicon.ico；如果设置为false，则仅在HTML页面中指定了图标时才会加载它们。参见http://kb.mozillazine.org/Browser.chrome.favicons和相关页面。 - Mr Lister