HTML 5 Favicon - 支持？

Question

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

当前的HTML5规范建议使用标记内的属性rel ="icon"sizes ="以空格分隔的图标维度列表"指定多个大小的大小图标.[ 来源 ]多种图标格式,包括容器格式,如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使用他们的apple-touch-icon元标记方法而不是HTML5方法.

维基百科文章声称:

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

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

在搜索中,除了维基百科文章之外,我无法在HTML 5 Favicon上找到任何(可信的)信息.

Answer 1

提供的答案(在本文发布时)仅是链接答案,所以我想我会将链接汇总成答案以及我将使用的内容.

在创建跨浏览器Favicons(包括触摸图标)时,有几件事需要考虑.

第一个(当然)是Internet Explorer.在版本11之前,IE不支持PNG favicons.所以我们的第一行是对IE 9及以下版本中的favicons的条件评论:

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

要覆盖图标的使用,请以32x32像素创建它.请注意rel="shortcut icon",IE用于识别需要shortcut非标准单词的图标.我们.ico还将IE图标包含在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">

rel="apple-touch-icon-precomposed"在iOS上添加书签时,使用不会应用反射光泽.让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文件的其他信息,请访问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用户制作"Live Tile",必须使用以下代码:

以下是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的维基百科文章
• 图标手册
• 了解 Jonathan T. Neal 的Favicon
• rel ="快捷图标"被Mathias Bynens 视为有害
• 您一直想知道关于 Mathias Bynens的触摸图标的所有内容

Answer 2

不,并非所有浏览器都支持该sizes属性:

• Safari:是的,它选择了最合适的图片.
• 歌剧院:是的,它选择了最合适的画面.
• IE11:不确定.它显然需要找到更大的图片,这有点粗糙但没关系.
• Chrome:不,请参阅错误112941和324820.事实上,Chrome倾向于加载所有已声明的图标,而不仅仅是最佳/第一个/最后一个.
• Firefox:不,请参阅错误751712.与Chrome一样,Firefox倾向于加载所有声明的图标.

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

• Android Chrome需要一个192x192图标,但它有利于声明的图标(manifest.json如果它存在).此外,Chrome使用Apple Touch图标作为书签.
• Coast by Opera预计会有一个228x228的图标.
• 谷歌电视需要一个96x96的图标.