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吗?自动图标吗?是否有理由为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文档中。
5 个解决方案
#1
205
To choose a different location or file type (e.g. PNG or 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:
要为favicon选择不同的位置或文件类型(例如PNG或SVG):一个原因可能是您希望图标位于特定的位置，可能在images文件夹或类似的地方。例如:
<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/*/img/favicon.ico">.
这个不同的位置甚至可能是CDN，就像使用 所做的一样。
To learn more about using other file types like PNG check out this question.
要了解更多使用其他文件类型，如PNG，请查看这个问题。
For cache busting purposes:
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.
favicon被大量缓存，这是确保刷新的好方法。
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 not a reason to use a link for it.
关于默认位置的脚注:直到第一个问题:所有的现代浏览器都会在默认位置检测到一个favicon，所以这不是使用链接的原因。
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 on properly links to the appropriate spec which shows a rel value of shortcut isn't a valid option.
关于rel="icon"的脚注:如@Semanino的回答所示，使用rel="快捷图标"是旧版本的ie浏览器所需要的一种古老的技术，但在大多数情况下，可以用更正确的rel="icon"指令代替。@Semanino文章基于正确的链接到适当的规范，该规范显示快捷方式的rel值不是有效的选项。
#2
44
Please note that both the HTML5 specification of W3C and WhatWG standardize
请注意，W3C和WhatWG的HTML5规范都是标准化的
<link rel="icon" href="/favicon.ico">
Note the value of the "rel" attribute!
注意“rel”属性的值!
The value shortcut icon for the rel attribute is a very old Internet Explorer specific extension and deprecated.
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="快捷图标"被认为是有害的。
#3
9
<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" />
It all depends on which format of image you like to use!
if you have a icon of your website, it will be much better for UX!
这完全取决于你喜欢使用哪种格式的图像!如果你有你的网站图标，它将是更好的用户体验!
#4
1
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">
#5
0
The bottom line is not all browsers will actually look for your favicon.ico file. Some browsers allow users to choose whether or not it should automatically look. Therefore, in order to ensure that it will always appear and get looked at, you do have to define it.
底线是并不是所有的浏览器都会寻找你的图标。ico文件。有些浏览器允许用户选择它是否应该自动显示。因此，为了确保它总是出现并被查看，您必须定义它。
#1
205
To choose a different location or file type (e.g. PNG or 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:
要为favicon选择不同的位置或文件类型(例如PNG或SVG):一个原因可能是您希望图标位于特定的位置，可能在images文件夹或类似的地方。例如:
<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/*/img/favicon.ico">.
这个不同的位置甚至可能是CDN，就像使用 所做的一样。
To learn more about using other file types like PNG check out this question.
要了解更多使用其他文件类型，如PNG，请查看这个问题。
For cache busting purposes:
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.
favicon被大量缓存，这是确保刷新的好方法。
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 not a reason to use a link for it.
关于默认位置的脚注:直到第一个问题:所有的现代浏览器都会在默认位置检测到一个favicon，所以这不是使用链接的原因。
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 on properly links to the appropriate spec which shows a rel value of shortcut isn't a valid option.
关于rel="icon"的脚注:如@Semanino的回答所示，使用rel="快捷图标"是旧版本的ie浏览器所需要的一种古老的技术，但在大多数情况下，可以用更正确的rel="icon"指令代替。@Semanino文章基于正确的链接到适当的规范，该规范显示快捷方式的rel值不是有效的选项。
#2
44
Please note that both the HTML5 specification of W3C and WhatWG standardize
请注意，W3C和WhatWG的HTML5规范都是标准化的
<link rel="icon" href="/favicon.ico">
Note the value of the "rel" attribute!
注意“rel”属性的值!
The value shortcut icon for the rel attribute is a very old Internet Explorer specific extension and deprecated.
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="快捷图标"被认为是有害的。
#3
9
<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" />
It all depends on which format of image you like to use!
if you have a icon of your website, it will be much better for UX!
这完全取决于你喜欢使用哪种格式的图像!如果你有你的网站图标，它将是更好的用户体验!
#4
1
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">
#5
0
The bottom line is not all browsers will actually look for your favicon.ico file. Some browsers allow users to choose whether or not it should automatically look. Therefore, in order to ensure that it will always appear and get looked at, you do have to define it.
底线是并不是所有的浏览器都会寻找你的图标。ico文件。有些浏览器允许用户选择它是否应该自动显示。因此，为了确保它总是出现并被查看，您必须定义它。