当工作来创建Cross Browser Favicon(包括触摸图标)时，有几个事情需要考虑。

第一个(当然)是Internet Explorer。 IE不支持PNG favicons直到版本11.所以我们的第一行是一个条件注释的favicon在IE 9及以下：

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

要覆盖图标的使用创建它在32×32像素。请注意，rel =“快捷方式图标”用于IE识别需要不是标准的快捷方式的图标。此外，我们将.ico favicon包装在IE条件注释中，因为Chrome和Safari将使用.ico文件(如果它存在)，尽管其他选项可用，不是我们想要的。

以上覆盖IE直到IE 9. IE 11接受PNG图标，然而，IE 10不接受。此外，IE 10不会读取条件注释，因此IE 10不会显示图标。有了IE 11和Edge可用，我没有看到IE 10在广泛使用，所以我忽略这个浏览器。

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

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

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

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

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

使用rel =“apple-touch-icon-precomposed”将不会应用在iOS上添加书签时的反射光泽。要使iOS应用shine使用rel =“apple-touch-icon”。此图标的大小应为180×180像素，因为苹果推荐的最新iPhones和iPad的当前大小。我读过黑莓也会使用rel =“apple-touch-icon-precomposed”。

注意：Chrome for Android状态：

The apple-touch-* are deprecated,and will be supported only for a short time. (Written as of beta for m31 of Chrome).

Windows 8.1上的IE 11的自定义图块

Windows 8.1上的IE 11提供了一种为您的网站创建固定图块的方法。

Microsoft建议创建以下大小的几个磁贴：

Small: 128 x 128

Medium: 270 x 270

Wide: 558 x 270

Large: 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 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用户为您的网站创建“活动磁贴”，必须使用以下代码：

Here are detailed instructions from Microsoft但这里是一个概要：

步骤1

为您的网站创建一个正方形图像，以支持高分辨率屏幕创建大小为768×768像素。

第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

然后你可以添加下面的行添加一个pin来启动链接：

<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来指定多个大小，如果需要带宽较低的人，但我已经压缩PNG文件大量使用TinyPNG，我觉得这不必要的我的目的。此外，根据philippe_b的answer Chrome和Firefox有错误，导致浏览器加载所有大小的图标。使用一个大图标可能比多个较小的图标更好，因为这个。

进一步阅读

对于那些谁想要更多的细节，请看下面的链接：

> Wikipedia Article on Favicons
> The Icon Handbook
> Understand the Favicon由Jonathan T. Neal
> rel=”shortcut icon” considered harmful由Mathias Bynens
> Everything you always wanted to know about touch icons，Mathias Bynens