提供的答案（在本文发布时）是仅链接的答案，所以我想我会将链接总结为答案以及我将使用什么。
在创建跨浏览器网站图标（包括触摸图标）时，需要考虑几件事情。
第一个（当然）是 Internet Explorer。 IE 直到版本 11 才支持 PNG favicon。所以我们的第一行是 IE 9 及以下版本的 favicon 的条件注释：
<!--[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 favicon，但是 IE 10 不接受。 IE 10 也不会读取条件 cmets，因此 IE 10 不会显示 favicon。随着 IE 11 和 Edge 可用，我看不到 IE 10 得到广泛使用，所以我忽略了这个浏览器。
对于其他浏览器，我们将使用标准方式来引用网站图标：
<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 推荐的当前大小。我读过黑莓也会使用rel="apple-touch-icon-precomposed"。
请注意：Android 版 Chrome 声明：
apple-touch-* 已弃用，仅在短时间内支持。 （在 Chrome 的 m31 测试版中编写）。
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 动态磁贴
如果用户使用的是 Windows Phone，他们可以将网站固定到手机的开始屏幕。不幸的是，当他们这样做时，它会显示您手机的屏幕截图，而不是网站图标（甚至不是上面引用的 MS 特定代码）。要为您的网站为 Windows Phone 用户制作“动态磁贴”，必须使用以下代码：
Here are detailed instructions from Microsoft 但这里有一个概要：
第一步
为您的网站创建一个方形图像，以支持高分辨率屏幕，创建大小为 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>
第三步
然后您可以添加以下行来添加一个 pin 以启动链接：
<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 文件，我发现这对我的目的来说是不必要的。此外，根据philippe_b 的answer，Chrome 和 Firefox 存在导致浏览器加载各种尺寸图标的错误。因此，使用一个大图标可能比多个小图标更好。
进一步阅读
想要了解更多详情的朋友，请查看以下链接：