HTML 5图标-支持

Question

我正在阅读维基百科上的Favicon页面。他们提到了Favicon的HTML 5规范:

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

看看引用的文章(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方法。

维基百科的文章声称:

谷歌Chrome浏览器，然而，将选择最接近匹配的大小从那些提供在HTML头创建128×128像素应用程序图标，当用户选择创建应用程序快捷方式…

Internet Explorer (v9到v11)和Firefox如何处理此问题?文章是正确的Chrome如何处理HTML Favicons?(没有引用Chrome的来源证实这一点。)

在搜索中，我没有找到任何(可信的)关于HTML 5 Favicon的信息，除了维基百科的文章。

Answer 1

提供的答案(在这篇文章发表的时候)只是链接的答案，所以我想我应该把链接总结成一个答案和我将要使用的。

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

第一个(当然)是Internet Explorer。IE在版本11之前不支持PNG图标。因此，我们的第一行是ie9及以下的favicons的条件注释:

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

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

以上内容涵盖ie9之前的版本。IE 11接受PNG图标，但是IE 10不接受。另外，IE 10不读取条件评论，因此IE 10不会显示图标。由于IE 11和Edge可用，我没有看到IE 10被广泛使用，所以我忽略了这款浏览器。

对于其他浏览器，我们将使用标准的方式来引用图标:

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

这个图标的大小应该是196x196像素，以覆盖所有可能使用这个图标的设备。

为了涵盖移动设备上的触摸图标，我们将使用苹果的专有方式来引用触摸图标:

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

在iOS上添加书签时，使用rel="apple-touch-icon-precomposed"将不会应用反射光泽。要让iOS应用发光，使用rel="apple-touch-icon"。这个图标的大小应该是18x180像素，因为这是苹果公司为最新的iphone和ipad推荐的当前尺寸。我听说黑莓也将使用rel="apple-touch-icon-precomposed"。

作为提示:Chrome for Android声明:

apple-touch-*已弃用，只会在短时间内被支持。(从Chrome的m31测试版开始编写)。

Windows 8.1下的IE 11+自定义磁贴+

Windows 8.1+上的IE 11+确实提供了一种为您的站点创建固定磁贴的方法。

Microsoft建议创建如下大小的磁贴:

字体:128 * 128

中号:270 * 270

宽度:558 * 270

大号:558 * 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" />

有关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动态磁贴

如果用户使用的是Windows Phone，他们可以将网站固定在手机的开始屏幕上。不幸的是，当他们这样做时，它显示的是你手机的截图，而不是一个图标(甚至不是上面提到的MS特定代码)。制作一个"活瓷砖"对于Windows Phone用户的网站，必须使用以下代码:

这里是微软的详细说明，但这里是一个概要:

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

size说明

我使用一个大小，因为每个浏览器都会根据需要缩小图像。如果带宽较低，我可以添加更多的HTML来指定多个大小，但我已经使用TinyPNG大量压缩PNG文件，我发现这对我的目的来说是不必要的。此外，根据philippe_b的回答，Chrome和Firefox都有导致浏览器加载各种大小图标的错误。因此，使用一个大图标可能比使用多个小图标更好。

进一步阅读

如欲了解更多详情，请参阅以下链接:

• 维基百科关于Favicons的文章
• 图标手册
• rel ="快捷icon"Mathias Bynens认为有害
• 你一直想知道的关于触摸图标的一切

Answer 2

不，不是所有的浏览器都支持sizes属性:

• Safari:是的，它选择最适合的图片。
Opera:是的，它会选择最合适的图片。IE11:不确定。它显然会拍摄它找到的更大的图片，这有点粗糙，但还好。Chrome:不，见bug 112941和324820。事实上，Chrome倾向于加载所有声明的图标，而不仅仅是最好的/第一个/最后一个。
• Firefox:没有，见bug 751712。和Chrome一样，Firefox倾向于加载所有声明的图标。

请注意，有些平台定义了特定的尺寸:

• Android Chrome期望一个192x192图标，但它倾向于在manifest.json中声明的图标，如果它存在。另外，Chrome使用Apple Touch图标作为书签。
• Coast by Opera期望一个228x228的图标
• Google TV期望一个96x96的图标。