Html 是否需要为 favicon.ico 添加链接标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10218178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Necessary to add link tag for favicon.ico?
提问by user1087110
Are there any modern browsers that won't detect the favicon.ico automatically? Is there any reason to add the link tag for favicon.ico?
是否有任何现代浏览器不会自动检测 favicon.ico？是否有任何理由为 favicon.ico 添加链接标签？
<link rel="shortcut icon" href="/favicon.ico">
My guess is that it's only necessary to include it in the HTML document if you decide to go with GIF or PNG...
我的猜测是，如果您决定使用 GIF 或 PNG，则只需要将其包含在 HTML 文档中...
回答by Jeroen
To choose a different location or file type (e.g. PNGor SVG)for the favicon:
One reason can be that you want to have the icon in a specific location, perhaps in the images folder or something alike. For example:
为图标选择不同的位置或文件类型（例如PNG或SVG）：
一个原因可能是您希望将图标放在特定位置，可能在图像文件夹或类似位置。例如：
<link rel="icon" href="_/img/favicon.png">
This diferent location may even be a CDN, just like SO seems to do with <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.
这个不同的位置甚至可能是一个 CDN，就像 SO 似乎与<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.
To learn more about using other file types like PNG check out this question.
要了解有关使用其他文件类型（如 PNG）的更多信息，请查看此问题。
For cache bustingpurposes:
Add a query string to the path for cache-busting purposes:
用于缓存破坏目的：
将查询字符串添加到路径以用于缓存破坏目的：
<link rel="icon" href="/favicon.ico?v=1.1">
Favicons are very heavily cached and this a great way to ensure a refresh.
收藏夹图标被大量缓存，这是确保刷新的好方法。
Footnote about default location:
As far as the first bit of the question: all modern browsers would detect a favicon at the default location, so that's nota reason to use a linkfor it.
关于默认位置的脚注：
就问题的第一点而言：所有现代浏览器都会在默认位置检测到收藏夹图标，因此这不是使用 a 的理由link。
Footnote about rel="icon":
As indicated by @Semanino's answer, using rel="shortcut icon"is an old technique which was required by older versions of Internet Explorer, but in most cases can be replaced by the more correct rel="icon"instruction. The article @Semanino based this onproperly links to the appropriate specwhich shows a relvalue of shortcutisn't a valid option.
关于脚注rel="icon"：
如@Semanino 的回答所示， usingrel="shortcut icon"是旧版本的 Internet Explorer 所需的旧技术，但在大多数情况下可以用更正确的rel="icon"说明代替。文章@Semanino 基于此正确链接到适当的规范，该规范显示rel值shortcut不是有效选项。
回答by Semanino
Please notethat both the HTML5 specification of W3C and WhatWG standardize
请注意，这两个W3C的HTML5规范和WHATWG标准化
<link rel="icon" href="/favicon.ico">
Note the value of the "rel" attribute!
注意“rel”属性的值！
The value shortcut iconfor the relattribute is a very old Internet Explorer specific extension and deprecated.
值shortcut icon的rel属性是一个很老的Internet Explorer特定的扩展和过时。
So please consider not using it any more and updating your files so they are standards compliant and are displayed correctly in all browsers.
因此，请考虑不再使用它并更新您的文件，使其符合标准并在所有浏览器中正确显示。
You might also want to take a look at this great post: rel="shortcut icon" considered harmful
您可能还想看看这篇很棒的帖子：rel="shortcut icon" 被认为是有害的
回答by xgqfrms
<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" />
<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" />
It all depends on which format of image you like to use!
if you have an icon of your website, it will be much better for UX!
这完全取决于您喜欢使用哪种格式的图像！
如果你有你网站的图标，那对用户体验来说会好得多！
demo
演示
show logo in the browser tab
在浏览器选项卡中显示徽标
回答by Abhilash
We can add for all devices with platform specific size
我们可以为平台特定尺寸的所有设备添加
<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">
回答by animuson
The bottom line is not all browsers willactually look for your favicon.icofile. Some browsers allow users to choose whether or not it should automatically look. Therefore, in order to ensure that it will alwaysappear and get looked at, you do have to define it.
最重要的是，并非所有浏览器都会实际查找您的favicon.ico文件。一些浏览器允许用户选择是否应该自动查看。因此，为了确保它始终出现并被查看，您必须对其进行定义。
