HTML 5 Favicon-支持吗？

HTML 5 Favicon-支持吗？

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

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

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

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

为了涵盖图标的用途，请以32x32像素创建它。注意

rel="shortcuticon"

IE可以识别图标，它需要

shortcut

非标准单词。同样，我们将

.ico

favicon
包装在IE条件注释中，因为

.ico

尽管存在其他可用选项，但Chrome和Safari仍会使用该文件（如果存在），而不是我们想要的。

以上内容涵盖了IE 9之前的IE。IE11接受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，仅将链接显示给那些用户，因为该链接对其他用户不起作用。

第四步

接下来，您添加一些JS来切换叠加层的可见性

<script>function ToggleTileOverlay() { var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible'; document.getElementById('TileOverlay').style.visibility =    newVisibility;}</script>

注意尺寸

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