HTML 5 Favicon – 支持？
我正在阅读Wikipedia上的Favicon页面。 他们提到了Favicon的HTML 5规范：
目前的HTML5规范build议在标签中使用属性rel =“icon”sizes =“空格分隔的图标尺寸列表”来指定多个尺寸的尺寸图标。 [ 源 ]多种图标格式，包括容器格式，如Microsoft .ico和Macintosh图标，以及可缩放vectorgraphics，可以通过在图标的内容types中以type =“file content-type”的forms提供标签。
看引用的文章（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"> 我的问题是任何浏览器都支持HTML 5方法吗？
注：我知道苹果使用他们的apple-touch-icon元标记方法通过HTML5的方法。
维基百科文章声称：
然而，当用户从“工具”菜单中select“创build应用程序快捷方式”时，Google Chrome网页浏览器将select与HTML标题中提供的尺寸最接近的匹配尺寸，以创build128×128像素的应用程序图标。
Internet Explorer（v9到v11）和Firefox如何处理这个问题？ 这篇文章是否正确处理了Chrome处理HTML Favicons？ （Chrome没有证据certificate这一点。）
在search中，我无法在维基百科文章以外的HTML 5 Favicon上find任何可信的信息。
所提供的答案（在这篇文章的时间）是链接唯一的答案，所以我想我会总结链接到一个答案，我会用什么。
在创build跨浏览器Favicons（包括触摸图标）时，有几件事情需要考虑。
第一个（当然）是Internet Explorer。 IE不支持PNG图标，直到版本11.因此，我们的第一行是在IE 9和以下的favicon条件注释：
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
要覆盖该图标的使用，请在32×32像素处创build它。 注意rel="shortcut icon"让IE识别它所需要的图标不是标准的单词shortcut 。 另外，我们在IE浏览器的条件评论中包裹了IEcollections夹图标，因为Chrome和Safari会使用.ico文件（如果存在的话），尽pipe可以使用其他选项，而不是我们想要的。
以上内容涵盖IE 9以上。IE 11接受PNG图标，但IE 10不支持。 此外，IE 10不会读条件注释，因此IE 10将不会显示图标。 随着IE 11和边缘可用我没有看到IE 10广泛使用，所以我忽略了这个浏览器。
对于其他浏览器，我们将使用标准方式引用favicon：
<link rel="icon" href="path/to/favicon.png">
此图标的大小应为196×196像素，以覆盖可能使用此图标的所有设备。
为了覆盖移动设备上的触摸图标，我们将使用苹果专有的方式来引用触摸图标：
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
使用rel="apple-touch-icon-precomposed"将不会在iOS上设置书签时应用reflection光泽。 要让iOS应用shine，请使用rel="apple-touch-icon" 。 这个图标的尺寸应该是180×180像素，这是苹果推荐的最新iPhone和iPad的尺寸。 我已经读过黑莓也会使用rel="apple-touch-icon-precomposed" 。
作为一个说明：Android的Chrome浏览器状态：
apple-touch- *不推荐使用，只会在短时间内支持。 （写成Chrome的m31testing版）。
用于Windows 8.1及更高版本的IE 11+的自定义磁贴
Windows 8.1+上的IE 11+提供了一种为您的网站创build固定磁贴的方法。
Microsoftbuild议按以下大小创build几个区块：
小：128 x 128
中等：270 x 270
宽：558 x 270
大：558 x 558
这些应该是透明的图像，因为接下来我们将定义一个颜色背景。
一旦创build了这些图像，您应该使用以下代码创build一个名为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>
将这个xml文件保存在您的网站的根目录下。 当一个网站固定IE浏览器会寻找这个文件。 如果你想给xml文件命名一些不同的东西或者把它放在不同的位置，把这个meta标签添加到head ：
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
有关IE 11+自定义切片的更多信息以及使用XML文件， 请访问Microsoft的网站 。
把它放在一起：
综合起来，上面的代码看起来像这样：
<!-- 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，则可以将网站固定到手机的开始屏幕上。 不幸的是，当他们这样做时，它会显示您的手机屏幕截图，而不是一个图标（甚至没有上面提到的MS特定的代码）。 要为您的网站制作Windows Phone用户的“实时拼贴”，您必须使用以下代码：
这里是来自微软的详细说明，但这里是一个简介：
步骤1
为您的网站创build一个方形的图像，以支持高分辨率的屏幕创build在768×768像素的大小。
第2步
添加此图片的隐藏叠加层。 以下是来自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>
第3步
然后你可以添加下面的行添加一个引脚来启动链接：
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Microsoftbuild议您检测Windows Phone，并仅向那些用户显示该链接，因为它不适用于其他用户。
步骤4
接下来，添加一些JS来切换叠加层的可见性
<script> function ToggleTileOverlay() { var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible'; document.getElementById('TileOverlay').style.visibility = newVisibility; } </script>
关于尺寸的说明
我使用一种尺寸，因为每个浏览器都会根据需要缩放图像。 如果需要的话，我可以添加更多的HTML来指定多个大小，但对于带宽较低的用户，我已经在使用TinyPNG大量压缩PNG文件，而且我发现这对于我的目的来说是不必要的。 另外，根据philippe_b的回答， Chrome和Firefox有错误，导致浏览器加载所有大小的图标。 因此，使用一个大图标可能会比多个小图标更好。
进一步阅读
对于那些想了解更多细节的人，请看下面的链接：
- Wikipedia关于Favicons的文章
- 图标手册
- 通过Jonathan T. Neal 了解Favicon
- rel =“快捷图标” Mathias Bynens 认为是有害的
- 你一直想知道的关于由Mathias Bynens 触摸图标的一切
不，不是所有的浏览器都支持sizes属性：
- Safari：是的， 它select最适合的图片 。
- 歌剧：是的， 它select最适合的图片 。
- IE11：不确定。 它显然采取了它发现的更大的图片 ，这有点粗糙，但没关系。
- Chrome：不，请参阅112941和324820的错误。 事实上，Chrome往往会加载所有声明的图标，不仅是最好的/第一/最后一个。
- Firefox：不，请参阅错误751712 。 像Chrome一样，Firefox往往会加载所有声明的图标。
请注意，某些平台定义了特定的尺寸
- Android Chrome需要一个192×192的图标 ，但如果它存在的话，它支持在
manifest.json声明的图标。 此外， Chrome使用Apple Touch图标作为书签 。 - Opera的海岸期待228×228图标 。
- Google TV预计会有一个96×96的图标 。
