Question

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

当前的HTML5规范建议使用标记内的属性rel =“icon”sizes =“以空格分隔的图标尺寸列表”指定多种尺寸的尺寸图标。 [source]可以通过以type =“file content-形式包含图标的内容类型来提供多种图标格式，包括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">

我的问题是，任何浏览器都支持HTML 5方法吗？

注意：我知道Apple使用他们的apple-touch-icon元标记方法而不是HTML5方法。

维基百科文章声称：

但是，当用户从“工具”菜单中选择“创建应用程序快捷方式...”时，Google Chrome网络浏览器将选择与HTML标题中提供的最匹配的大小，以创建128×128像素的应用程序图标。 / p>

Internet Explorer（v9到v11）和Firefox如何处理这个问题？ Chrome处理HTML Favicons的方式文章是否正确？（Chrome没有引用消息来证实这一点。）

在搜索中，除了维基百科文章之外，我无法在HTML 5 Favicon上找到任何（可信的）信息。

Answer 1

所提供的答案（在本文发布时）仅为链接答案，所以我想我会将这些链接汇总成答案以及我将要使用的内容。

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

第一个（当然）是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的图标，这不是标准的。此外，我们将.ico favicon包装在IE条件评论中，因为Chrome和Safari将使用.ico文件（如果存在），尽管有其他可用选项，而不是我们想要的。

以上涵盖IE到IE 9。IE 11接受PNG favicons，但IE 10没有。此外，IE 10不读取条件注释，因此IE 10将不显示favicon。有了IE 11和Edge，我没有看到IE 10被广泛使用，所以我忽略了这个浏览器。

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

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

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

要覆盖移动设备上的触控图标，我们将使用Apple专有的方式引用触控图标：

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

在iOS上添加书签时，使用rel="apple-touch-icon-precomposed"将不会应用反射光泽。要让iOS应用光泽使用rel="apple-touch-icon"。此图标的大小应为180x180像素，因为这是Apple推荐的最新iPhone和iPad的当前尺寸。我读过Blackberry也会使用rel="apple-touch-icon-precomposed"。

作为备注：适用于Android的Chrome状态：

apple-touch- *已被弃用，并且只会在短时间内得到支持。（写作测试版m31 of Chrome）。

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

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

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" />

有关IE 11+自定义磁贴和使用XML文件visit Microsoft's website的其他信息。

全部放在一起：

总而言之，上面的代码看起来像这样：

<!-- 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用户制作“Live Tile”，必须使用以下代码：

Here are detailed instructions from 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的answer Chrome和Firefox存在导致浏览器加载所有尺寸图标的错误。因此，使用一个大图标可能比多个较小图标更好。

进一步阅读

如果您想了解更多详细信息，请参阅以下链接：

Wikipedia Article on Favicons
The Icon Handbook
Understand the Favicon
rel="shortcut icon" considered harmful作者Mathias Bynens
Everything you always wanted to know about touch icons作者Mathias Bynens

Answer 2

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

Safari：是的，it picks the picture that fits best。
Opera：是的，it picks the picture that fits best。
IE11：不确定。 It apparently takes the larger picture it finds，这有点粗糙但没关系。
Chrome：不，请参阅错误112941和324820。事实上，Chrome倾向于加载所有声明的图标，而不仅仅是最佳/第一个/最后一个。
Firefox：不，请参阅bug 751712。与Chrome一样，Firefox倾向于加载所有声明的图标。

请注意，某些平台会定义特定尺寸：

Android Chrome expects a 192x192 icon，但它有利于manifest.json中声明的图标（如果它存在）。另外，Chrome uses the Apple Touch icon for bookmarks。
Coast by Opera expects a 228x228 icon。
Google TV expects a 96x96 icon。

HTML 5 Favicon - 支持？

2 个答案: