HTML5图标-支持？

Question

我在读维基百科上的Favicon页面。他们提到了Favicon的HTML5规范：

当前的HTML5规范建议使用标记中的属性rel=“icon”sizes=“图标尺寸的空格分隔列表”指定多个尺寸的尺寸图标。[源]通过在标签中包含type=“file content-type”形式的图标内容类型，可以提供多种图标格式，包括诸如Microsoft.ico和Macintosh.icns文件等容器格式，以及可缩放的矢量图形。

看看引用的文章(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">

我的问题是有浏览器支持HTML5方法吗？

注意：我知道苹果在HTML5方法上使用了apple-touch-icon元标记方法。

维基百科的这篇文章声称：

然而，谷歌Chrome web浏览器将从HTML标题中提供的大小中选择最匹配的大小，当用户选择创建应用程序快捷方式时，创建128×128像素的应用程序图标...从“工具”菜单中。

Internet Explorer(v9到v11)和Firefox是如何处理这个问题的呢？这篇文章中的Chrome如何处理HTML图标是正确的吗？（Chrome没有引用任何消息来源证实这一点。）

在搜索中，除了维基百科的文章之外，我没有找到任何关于HTML5 Favicon的（可信的）信息。

Answer 1

不，并非所有浏览器都支持sizes属性：

• Safari:是的，它会选择最合适的图片。
• Opera：是的，它会选择最合适的图片。
• IE11:不确定。它显然拍摄了它发现的更大的图片，这有点粗糙，但还可以。
• 铬：否，请参阅错误112941和324820。事实上，Chrome倾向于加载所有声明的图标，而不仅仅是最好的/第一个/最后一个。
• 火狐：不，请参阅bug751712。与Chrome一样，Firefox倾向于加载所有声明的图标。

请注意，某些平台定义了特定的大小：

• Android Chrome需要一个192x192的图标，但它更喜欢在manifest.json中声明的图标（如果有的话）。此外，Chrome使用Apple Touch图标作为书签。
• Coast by Opera需要一个228x228图标。
• Google TV需要96x96图标。

Answer 2

提供的答案（在这篇文章的时候）是仅有链接的答案，所以我想我会把链接总结成一个答案和我将使用的东西。

当创建跨浏览器图标（包括触摸图标）时，有几件事需要考虑。

首先（当然）是Internet Explorer。IE在版本11之前不支持PNG favicons。所以我们的第一行是IE 9及以下版本中的favicons的条件注释：

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

为了覆盖图标的用途，创建32x32像素的图标。请注意rel=“shortcut icon”IE要识别图标，它需要shortcut这个词，这不是标准的。此外，我们将.icofavicon包装在IE条件注释中，因为如果.ico文件存在，Chrome和Safari将使用该文件，尽管有其他选项，但这并不是我们想要的。

以上涵盖IE至IE 9。IE 11接受PNG偏好，然而IE 10不接受。另外，IE 10不读取条件注释，因此IE 10不会显示一个favicon。在IE11和Edge可用的情况下，我没有看到IE10在广泛使用，所以我忽略了这个浏览器。

对于其余的浏览器，我们将使用标准的方式来引用favicon：

<link rel="icon" href="path/to/favicon.png">

此图标大小应为196x196像素，以覆盖可能使用此图标的所有设备。

为了介绍移动设备上的触摸图标，我们将使用苹果的专有方法来引用触摸图标：

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

使用rel=“apple-touch-icon-precomposite”将不会在iOS上添加书签时应用反射光。若要让iOS应用光亮，请使用rel=“apple-touch-icon”。这个图标的大小应该是180x180像素，因为这是目前苹果推荐的最新iPhone和iPad的尺寸。我听说黑莓也会使用rel=“apple-touch-icon-precomposite”。

请注意：Android的Chrome声明：

Apple-Touch-*是不推荐使用的，并且只支持一段时间。（写为Chrome的m31的测试版）。

Windows 8.1+上的IE 11+自定义瓷砖

Windows8.1+上的IE11+提供了一种为您的站点创建固定瓷砖的方法。

Microsoft建议创建几个大小如下的瓷砖：

小型：128 x 128

中等：270 x 270

宽：558 x 270

大：558 x 558

这些应该是透明的图像，因为我们接下来将定义一个颜色背景。

创建这些映像后，您应该使用以下代码创建一个名为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文件命名为不同的名称或将其放在不同的位置，请将此元标记添加到head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

有关IE11+自定义贴图和使用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，他们可以将网站固定在手机的开始屏幕上。不幸的是，当他们这样做时，它显示的是你手机的屏幕截图，而不是favicon（甚至不是上面提到的MS特定代码）。若要为Windows Phone用户制作网站的“实时平铺”,必须使用以下代码：

以下是Microsoft提供的详细说明，但以下是简要说明：

步骤1

为您的网站创建一个正方形图像，以支持高分辨率屏幕创建它在768x768像素的大小。

步骤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>

Microsoft建议您检测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都存在导致浏览器加载各种大小图标的错误。正因为如此，使用一个大图标可能比多个小图标更好。

进一步阅读

想了解更多详情的人请参阅以下链接：

• 维基百科关于Favicons的文章
• 图标手册
• 理解Favicon，乔纳森·T·尼尔
• rel=“快捷图标”被Mathias Bynens认为有害
• 你一直想知道的关于触摸图标的一切Mathias Bynens