迹忆客 专注技术分享

“Touch-Icons”是移动设备和平板电脑的图标。 将它们添加到我们的网页很容易，我相信各位已经知道使用 HTML 是如何工作的：

<!-- In its simplest form: -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

遗憾的是 Apple 并没有实现标准的 <link rel=icon> 而是选择了一个更冗长的专有链接关系。 不过，适用于 Android 的 Chrome v31+ 确实支持这种语法！ 按如下方式使用它：

<link rel="icon" sizes="196x196" href="apple-touch-icon.png">

如果未找到此类 HTML，Android 版 Chrome 会回退到 Apple Touch-Icons。 更新：从 Chrome 30+ 开始，这不再是真的：不再自动获取 apple-touch-icon-*，因为通常返回的 404 页面占用了所有移动带宽使用量的 3-4%。 不过，当存在适当的 <link> HTML 时，目前它仍然会被下载。

Apple iOS 从 iOS 1.1.3 开始支持触摸图标。 奇怪的是 Android 2.1+ 也有苹果Touch-Icons支持（有一些奇怪）。

对于未指定自定义触摸图标的网页，将使用页面的缩略图屏幕截图代替。 Android 有一个默认图标，如果可用，一些系统会回退到 favicon。

Fancy 效果

iOS 会自动为我们的图标添加一些视觉效果，以便它与主屏幕上的内置图标协调（就像它与应用程序图标一样）。 具体来说，iOS 增加了：

• 圆角
• 投影
• 反光闪耀

从 iOS 2.0 开始，我们可以使用预组合关键字来阻止添加这些效果：

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

由于 rel 属性接受 HTML 中以空格分隔的值列表，理论上应该可以回退到具有 iOS 1 添加效果的常规图标，而不需要额外的 <link> 元素：

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

然而，在实践中，它并不是那样工作的。 如果我们使用空格分隔值技术，iOS 4.2 似乎会忽略整个声明。

我建议始终使用预制图标。 它使我们可以完全控制您的图标，并且它是 Android 2.1 支持的唯一一种图标。 从 iOS 7 开始，不再对 Touch-Icons 应用任何特效，因此如果我们只关心 iOS 7 及更高版本，则不必再使用预合成。

不同的图标大小

iOS HIG 中的图标和图像大小部分指出我们应该创建以下图标：

• 尺寸为 76 × 76 像素的 iPad 和 iPad Mini 型号，配备 1× 显示屏；
• iPhone 4s、iPhone 5、iPhone 6（具有 2× 显示屏）的尺寸为 120 × 120 像素；
• 一款尺寸为 152 × 152 像素的 iPad 和 iPad Mini 型号，配备 2× 显示屏；
• 尺寸为 180 × 180 像素的 iPhone 6 Plus（具有 3× 显示屏）。

更新 ：从 iOS 7 开始，Retina 显示屏 iPhone 的推荐 Touch-Icons 大小从 114 × 114 像素增加到 120 × 120 像素。 Retina 显示屏 iPad 的图标大小从 144 × 144 像素增加到 152 × 152 像素。 这篇文章已经更新以反映这一点。

更新 ：随着 iOS 8 和 iPhone 6 Plus 的发布，本文再次更新。

完全有可能只创建一个高分辨率图标并将其用于所有设备。 事实上，苹果就是这样做的。 屏幕较小或显示分辨率较低的设备会自动调整图标大小。 缺点是这些设备会加载高质量的大图像，而小得多的文件也能正常工作。 每当将站点添加到主屏幕时，这都会浪费带宽并对最终用户的性能产生负面影响。

幸运的是，从 iOS 4.2 开始，可以使用 sizes 属性为不同的设备分辨率指定多个图标：

<!-- For non-Retina (@1× display) iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">

这里适用一些简单的规则：

• 如果没有与设备的推荐大小相匹配的图标，则使用大于推荐大小的最小图标。
• 如果没有大于推荐大小的图标，则使用最大的图标。
• 如果多个图标都合适，则使用具有预组合关键字的图标。

但它变得更加复杂。 iOS 4.2 之前的版本简单地忽略了 sizes 属性，所以上面的代码片段将被解释为：

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-180x180-precomposed.png">

在这些系统上只会使用文档中的最后一个值。 在这种情况下，这是最大的图标。 根据我们的看法，颠倒图标的顺序可能会更好：

<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For iPad with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with @2× display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with @2× display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->

这样，旧的 iOS 版本会下载最小的图标而不是最大的图标。 因此，我们现在不再为所有设备强制使用最大的图标，除非它们支持 sizes 属性（iOS 4.2+），而是提供最小的图标，除非支持 @sizes。 换句话说，我们现在使用的是渐进增强而不是优雅降级:)

如有疑问，请始终使用此代码段。 由于支持几乎所有 iOS 版本和设备，以及尽可能多的不同 Android 版本，它是向我们的站点添加 Touch-Icons 的最可靠方式。

我已经让几个人在运行 Android 2.3 (Gingerbread) 的 Nexus One 上对此进行了测试，而且似乎也不支持 @sizes。 但是，它的行为与旧 iOS 版本不同：它不会使用最后一个 <link> 元素的 @href 值，而是使用第一个 <link> 元素的 rel="apple-touch-icon" 或 rel="apple-touch-icon-precomposed"。 在上面的代码片段中，这是可用的最大图标。

看，没有 HTML！

如果 HTML 中没有指定图标，iOS Safari 将在网站的根目录中搜索带有 apple-touch-icon 或 apple-touch-icon-precomposed 前缀的图标。 例如，如果设备的适当图标大小为 57 × 57 像素，iOS 将按以下顺序搜索文件名：

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.png

没错——对于 iOS，没有必要使用 HTML 将触摸图标添加到您的网站，即使您想要使用多个分辨率特定的图标。 告别每个 HTML 页面上的大量专有 <link rel="apple-touch-icon"> 元素。 只需创建不同版本的图标，使用正确的文件名并将它们放在根目录中。

那么，我们需要什么？

• apple-touch-icon-57x57-precomposed.png 或 apple-touch-icon-57x57.png 适用于非 Retina iPhone 和 iPod Touch（@1× 显示屏）；
• Apple-touch-icon-72x72-precomposed.png 或 apple-touch-icon-72x72.png 适用于 iPad mini 和 iOS 上的第一代和第二代 iPad（@1× 显示）≤ 6；
• apple-touch-icon-76x76-precomposed.png 或 apple-touch-icon-76x76.png 适用于 iOS ≥ 7 的 iPad mini 和第一代和第二代 iPad（@1× 显示屏）；
• apple-touch-icon-114x114-precomposed.png 或 apple-touch-icon-114x114.png 适用于 iOS ≤ 6 的 iPhone 4+（@2× 显示）；
• apple-touch-icon-120x120-precomposed.png 或 apple-touch-icon-120x120.png 适用于 iOS ≥ 7 的 iPhone 4+（@2× 显示）；
• apple-touch-icon-144x144-precomposed.png 或 apple-touch-icon-144x144.png 适用于 iPad 3+（@2× 显示屏）；
• apple-touch-icon-152x152-precomposed.png 或 apple-touch-icon-152x152.png 适用于 iPad 3+（@2× 显示屏）；
• apple-touch-icon-180x180-precomposed.png 或 apple-touch-icon-180x180.png 适用于 iPhone 6 Plus（@3× 显示屏）；
• Android 版 Chrome 的 touch-icon-192x192.png；
• apple-touch-icon-precomposed.png 和 apple-touch-icon.png 作为其他一切（可能包括非 Apple 设备）的后备。

最好同时包含 apple-touch-icon.png 和 apple-touch-icon-precomposed.png 以获得最大兼容性：iOS 1 和 BlackBerry OS6 不支持预合成图标。 （请注意，Android 2.1 仅支持预组合图标。）我们可以使用重写规则来避免必须复制文件。

遗憾的是，无 HTML 方法不适用于原生 Android 浏览器（在 2.3 Gingerbread、3 Honeycomb、4.1 Jelly Bean 中测试），尽管有报道称它在 4.2 Jelly Bean 的默认浏览器中有效。

总结

那么，使用哪种技术呢？ 这完全取决于

• 如果必须支持 Android，则必须使用 HTML，我建议使用“不同图标大小”部分下的最后一个代码片段。
• 如果只关心 iOS，我强烈建议使用非 HTML 方法。
• 如果你很懒惰，并不真正关心 Android、旧版 iOS 版本或性能，我想你可以只使用一个 180×180px 的图标，将其命名为 apple-touch-icon-precomposed.png 并将其放在你网站的根目录。