HTML 5 Favicon-支持吗?


170

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

当前的HTML5规范建议使用标签内的属性rel =“ icon” size =“以空格分隔的图标尺寸列表”,以多种尺寸指定尺寸图标。[ 来源 ]可以通过将图标的内容类型以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">

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

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

维基百科文章声称:

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

Internet Explorer(从v9到v11)和Firefox如何处理?而且Chrome浏览器如何处理HTML网站图标是否正确?(Chrome并未引用任何来源对此进行确认。)

在搜索中,除了Wikipedia文章之外,我无法真正找到有关HTML 5 Favicon的任何(可信的)信息。


1
上面的代码中似乎有些怪异-html5是否允许不引用属性值?答案- stackoverflow.com/questions/6495310/...
jakubiszon

Answers:


330

提供的答案(在撰写本文时)仅是链接的答案,所以我想我将这些链接汇总成一个答案以及我将使用的答案。

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

第一个(当然)是Internet Explorer。IE直到版本11才支持PNG图标。因此,第一行是IE 9及以下版本中图标的条件注释:

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

为了涵盖图标的用途,请以32x32像素创建它。注意rel="shortcut icon"IE可以识别图标,它需要shortcut非标准单词。同样,我们将.icofavicon 包装在IE条件注释中,因为.ico尽管存在其他可用选项,但Chrome和Safari仍将使用该文件(如果存在),而不是我们想要的。

以上涵盖了IE 9之前的IE。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">

rel="apple-touch-icon-precomposed"在iOS上加书签时,使用不会应用反射光。要让iOS应用闪耀用途rel="apple-touch-icon"。此图标的大小应为180x180像素,这是Apple为最新的iPhone和iPad建议的当前大小。我读过Blackberry也会用rel="apple-touch-icon-precomposed"

注意:Chrome for Android指出:

apple-touch- *已过时,仅在短时间内受支持。(写于测试版的m31 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文件,或者将其放在其他位置,请将此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动态磁贴

如果用户使用Windows Phone,则可以将网站固定到其手机的开始屏幕。不幸的是,当他们这样做时,它显示的是您手机的屏幕截图,而不是收藏夹图标(甚至不是上面引用的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>

第三步

然后,您可以在下面的行中添加w,以添加用于启动链接的引脚:

<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的错误会导致浏览器加载所有大小的图标。因此,使用一个大图标可能比使用多个小图标更好。

进一步阅读

对于那些想要更多细节的人,请参见以下链接:


1
苹果需要哪种尺寸的图标(用于我的书签Web应用程序)?320x460,640x920,640x1096,最高72x72,114x114,144x144,768x1004,1024x748?而对于Android?
Kiquenet

@Kiquenet对于网络,我为Apple使用180x180,为Android使用196x196(以及其他设备,但IE 10及以下版本除外。)
L84,2016年


在所有如何添加收藏夹图标的问题和答案中,这必须是我的最爱,因为它非常有用,而且最重要的是-它可以工作!谢啦!使用.PNG格式确实救了我!
twknab

16

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

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


1
...yet it favors the Apple Touch icon if it finds it.不确定这种说法是否完全正确,至少将来不会如此。从Chrome网站:The apple-touch-* are deprecated, and will be supported only for a short time. (Written as of beta for m31 of Chrome).
L84 2014年

2
是的,但是现在,Android Chrome 35选择了152x152 Apple touch图标,而忽略了196x196 PNG图标(我使用了兼容性测试:realfavicongenerator.net/favicon_compatibility_test)。我不知道Google什么时候会切换,但是我猜它不会很快发生。好吧,这只是一个猜测。
philippe_b

根据developer.apple.com/library/safari/documentation/UserExperience/…苹果的大小(Web剪辑图标)为76x76、120x120、152x152、167x167、180x180
Kiquenet

developer.chrome.com/multidevice/android/installtohomescreen尺寸为Android是36X36,48×48,最高72x72,96x96的,144x144,192x192,也许是太128×128
Kiquenet
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.