HTML 5 Favicon - 支持吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23849377/
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
HTML 5 Favicon - Support?
提问by L84
I was reading the Favicon page on Wikipedia. They mention the HTML 5 spec for Favicon:
我正在阅读维基百科上的 Favicon 页面。他们提到了 Favicon 的 HTML 5 规范：
The current HTML5 specification recommends specifying size icons in multiple sizes using the attributes rel="icon" sizes="space-separated list of icon dimensions" within a tag. [source] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the form of type="file content-type" within the tag.
当前的 HTML5 规范建议使用标签中的属性 rel="icon" sizes="space-separated list of icon dimensions" 以多种尺寸指定大小图标。[来源] 多种图标格式，包括容器格式，如 Microsoft .ico 和 Macintosh .icns 文件，以及可缩放矢量图形，可以通过在标签。
Looking at the cited article (W3) they show this example:
查看引用的文章（W3），他们展示了这个例子：
<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
My question is do any browsers support the HTML 5 method?
我的问题是是否有任何浏览器支持 HTML 5 方法？
Note: I know Apple uses their apple-touch-iconmeta tag method over the HTML5 method.
注意：我知道 Apple 使用他们的apple-touch-icon元标记方法而不是 HTML5 方法。
The wikipedia article claims:
维基百科文章声称：
The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128×128 pixel application icons when the user chooses the Create application shortcuts... from the "Tools" menu.
但是，当用户从“工具”菜单中选择“创建应用程序快捷方式...”时，Google Chrome 网络浏览器将从 HTML 标头中提供的尺寸中选择最匹配的尺寸，以创建 128×128 像素的应用程序图标。
How does Internet Explorer (v9 to v11) and Firefox handle this? And is the article correct in how Chrome handles the HTML Favicons? (There is no source cited for Chrome confirming this.)
Internet Explorer（v9 到 v11）和 Firefox 如何处理这个问题？这篇文章在 Chrome 如何处理 HTML Favicon 方面是否正确？（Chrome 没有引用来源证实这一点。）
In searching I wasn't able to really find any (credible) info on HTML 5 Favicon other than the Wikipedia Article.
在搜索中，除了维基百科文章之外，我无法真正找到关于 HTML 5 Favicon 的任何（可靠）信息。
回答by L84
The answers provided (at the time of this post) are link only answers so I thought I would summarize the links into an answer and what I will be using.
提供的答案（在撰写本文时）仅是链接答案，因此我想我会将链接总结为答案以及我将使用的内容。
When working to create Cross Browser Favicons (including touch icons) there are several things to consider.
在创建跨浏览器 Favicon（包括触摸图标）时，需要考虑几件事情。
The first (of course) is Internet Explorer. IE does not support PNG favicons until version 11. So our first line is a conditional comment for favicons in IE 9 and below:
第一个（当然）是 Internet Explorer。IE 直到版本 11 才支持 PNG 图标。所以我们的第一行是 IE 9 及以下版本的图标的条件注释：
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
To cover the uses of the icon create it at 32x32 pixels. Notice the rel="shortcut icon"for IE to recognize the icon it needs the word shortcutwhich is not standard. Also we wrap the .icofavicon in a IE conditional comment because Chrome and Safari will use the .icofile if it is present, despite other options available, not what we would like.
为了涵盖图标的用途，将其创建为 32x32 像素。注意rel="shortcut icon"IE 要识别它需要的shortcut不是标准的词的图标。此外，我们将.icofavicon包装在 IE 条件注释中，因为 Chrome 和 Safari 将使用该.ico文件（如果它存在），尽管有其他选项可用，而不是我们想要的。
The above covers IE up to IE 9. IE 11 accepts PNG favicons, however, IE 10 does not. Also IE 10 does not read conditional comments thus IE 10 won't show a favicon. With IE 11 and Edge available I don't see IE 10 in widespread use, so I ignore this browser.
以上涵盖了 IE 到 IE 9。IE 11 接受 PNG 图标，但是，IE 10 不接受。此外，IE 10 不读取条件注释，因此 IE 10 不会显示图标。随着 IE 11 和 Edge 可用，我没有看到 IE 10 被广泛使用，所以我忽略了这个浏览器。
For the rest of the browsers we are going to use the standard way to cite a favicon:
对于其余的浏览器，我们将使用标准方式来引用图标：
<link rel="icon" href="path/to/favicon.png">
This icon should be 196x196 pixels in size to cover all devices that may use this icon.
此图标的大小应为 196x196 像素，以覆盖可能使用此图标的所有设备。
To cover touch icons on mobile devices we are going to use Apple's proprietary way to cite a touch icon:
为了覆盖移动设备上的触摸图标，我们将使用 Apple 的专有方式来引用触摸图标：
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Using rel="apple-touch-icon-precomposed"will not apply the reflective shine when bookmarked on iOS. To have iOS apply the shine use rel="apple-touch-icon". This icon should be sized to 180x180 pixels as that is the current size recommend by Apple for the latest iPhones and iPads. I have read Blackberry will also use rel="apple-touch-icon-precomposed".
rel="apple-touch-icon-precomposed"在 iOS 上添加书签时，使用不会应用反射光泽。要让 iOS 应用闪耀，请使用rel="apple-touch-icon". 此图标的大小应为 180x180 像素，因为这是 Apple 为最新的 iPhone 和 iPad 推荐的当前大小。我读过 Blackberry 也会使用rel="apple-touch-icon-precomposed".
As a note: Chrome for Android states:
请注意：Android 版 Chrome 声明：
The apple-touch-* are deprecated, and will be supported only for a short time. (Written as of beta for m31 of Chrome).
apple-touch-* 已被弃用，并且只会在短时间内得到支持。（从 Chrome 的 m31 的测试版开始）。
Custom Tiles for IE 11+ on Windows 8.1+
Windows 8.1+ 上 IE 11+ 的自定义磁贴
IE 11+ on Windows 8.1+ does offer a way to create pinned tiles for your site.
Windows 8.1+ 上的 IE 11+ 确实提供了一种为您的网站创建固定磁贴的方法。
Microsoft recommends creating a few tiles at the following size:
Microsoft 建议按以下大小创建一些磁贴：
Small: 128 x 128
Medium: 270 x 270
Wide: 558 x 270
Large: 558 x 558
小号：128 x 128
中：270 x 270
宽：558 x 270
大：558 x 558
These should be transparent images as we will define a color background next.
这些应该是透明图像，因为我们接下来将定义颜色背景。
Once these images are created you should create an xml file called browserconfig.xmlwith the following code:
创建这些图像后，您应该创建一个browserconfig.xml使用以下代码调用的 xml 文件：
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
Save this xml file in the root of your site. When a site is pinned IE will look for this file. If you want to name the xml file something different or have it in a different location add this meta tag to the head:
将此 xml 文件保存在您站点的根目录中。当站点被固定时，IE 将查找此文件。如果您想将 xml 文件命名为不同的名称或将其放在不同的位置，请将此元标记添加到head：
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
For additional information on IE 11+ custom tiles and using the XML file visit Microsoft's website.
有关 IE 11+ 自定义磁贴和使用 XML 文件的更多信息，请访问 Microsoft 网站。
Putting it all together:
把它们放在一起：
To put it all together the above code would look like this:
把它们放在一起，上面的代码看起来像这样：
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Windows Phone Live Tiles
Windows Phone 动态磁贴
If a user is using a Windows Phone they can pin a website to the start screen of their phone. Unfortunately, when they do this it displays a screenshot of your phone, not a favicon (not even the MS specific code referenced above). To make a "Live Tile" for Windows Phone Users for your website one must use the following code:
如果用户使用的是 Windows Phone，他们可以将网站固定到手机的开始屏幕。不幸的是，当他们这样做时，它会显示您手机的屏幕截图，而不是网站图标（甚至不是上面引用的 MS 特定代码）。要为您的网站的 Windows Phone 用户制作“动态磁贴”，必须使用以下代码：
Here are detailed instructions from Microsoftbut here is a synopsis:
以下是来自 Microsoft 的详细说明，但这里有一个概要：
Step 1
第1步
Create a square image for your website, to support hi-res screens create it at 768x768 pixels in size.
为您的网站创建一个方形图像，以支持高分辨率屏幕，将其创建为 768x768 像素大小。
Step 2
第2步
Add a hidden overlay of this image. Here is example code from Microsoft:
添加此图像的隐藏叠加层。以下是微软的示例代码：
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
Step 3
第 3 步
You then can add thew following line to add a pin to start link:
然后，您可以添加以下行以添加引脚以启动链接：
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoft recommends that you detect windows phone and only show that link to those users since it won't work for other users.
Microsoft 建议您检测 Windows Phone 并仅向这些用户显示该链接，因为它不适用于其他用户。
Step 4
第四步
Next you add some JS to toggle the overlay visibility
接下来你添加一些 JS 来切换覆盖可见性
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Note on Sizes
尺寸注意事项
I am using one size as every browser will scale down the image as necessary. I could add more HTML to specify multiple sizes if desired for those with a lower bandwidth but I am already compressing the PNG files heavily using TinyPNGand I find this unnecessary for my purposes. Also, according to philippe_b's answerChrome and Firefox have bugs that cause the browser to load all sizes of icons. Using one large icon may be better than multiple smaller ones because of this.
我使用一种尺寸，因为每个浏览器都会根据需要缩小图像。如果带宽较低的用户需要，我可以添加更多 HTML 来指定多个大小，但我已经使用TinyPNG大量压缩 PNG 文件，我发现这对我的目的来说是不必要的。此外，根据philippe_b的回答，Chrome 和 Firefox 存在导致浏览器加载所有大小图标的错误。因此，使用一个大图标可能比使用多个小图标更好。
Further Reading
进一步阅读
For those who would like more details see the links below:
想了解更多详情的朋友，请看以下链接：
- Wikipedia Article on Favicons
- The Icon Handbook
- Understand the Faviconby Jonathan T. Neal
- rel="shortcut icon" considered harmfulby Mathias Bynens
- Everything you always wanted to know about touch iconsby Mathias Bynens
- 维基百科关于 Favicon 的文章
- 图标手册
- 乔纳森·T·尼尔（Jonathan T. Neal）的《了解 Favicon》
- rel="shortcut icon"被 Mathias Bynens认为是有害的
- Mathias Bynens关于触摸图标你一直想知道的一切
回答by philippe_b
No, not all browsers support the sizesattribute:
不，并非所有浏览器都支持该sizes属性：
- Safari: Yes, it picks the picture that fits best.
- Opera: Yes, it picks the picture that fits best.
- IE11: Not sure. It apparently takes the larger picture it finds, which is a bit crude but okay.
- Chrome: No, see bugs 112941and 324820. In fact, Chrome tends to load alldeclared icons, not only the best/first/last one.
- Firefox: No, see bug 751712. Like Chrome, Firefox tends to load alldeclared icon.
- Safari：是的，它会选择最适合的图片。
- Opera：是的，它会挑选最适合的图片。
- IE11：不确定。它显然拍摄了它找到的更大的图片，这有点粗糙但还可以。
- Chrome：不，请参阅错误112941和324820。事实上，Chrome 倾向于加载所有声明的图标，而不仅仅是最好的/第一个/最后一个。
- Firefox：不，请参阅错误 751712。与 Chrome 一样，Firefox 倾向于加载所有声明的图标。
Note that some platforms define specific sizes:
请注意，某些平台定义了特定大小：
- Android Chrome expects a 192x192 icon, but it favors the icons declared in
manifest.jsonif it is present. Plus, Chrome uses the Apple Touch icon for bookmarks. - Coast by Opera expects a 228x228 icon.
- Google TV expects a 96x96 icon.
- Android Chrome 需要一个 192x192 的 icon，但
manifest.json如果它存在，它会支持声明的图标。另外，Chrome 使用 Apple Touch 图标作为书签。 - Coast by Opera 需要一个 228x228 的图标。
- Google TV 需要 96x96 图标。
