为已添加书签的网站添加 iOS 图标
自 1999 年引入 Internet Explorer 5 以来，书签图标或更普遍称为 favicon（收藏夹图标）就出现了。书签图标或 favicon 通常指定为 16×16 像素.ico（有时也有.png格式），并显示在旁边浏览器的URL地址或Tab界面的页面标题旁，如下图。
今天，随着移动设备的进步，书签图标或网站图标也发生了变化。例如，您可能熟悉的 iOS 在屏幕上显示图标。
大多数这些图标都设计精美，在 Apple 引入了一个新的元标记后，apple-touch-icon您现在可以在为网站添加书签时在 iOS 主屏幕上显示网站图标。
推荐阅读： 使用 MakeAppIcon 生成 Android 或 IOS 应用程序图标
添加 Apple Touch 图标
apple touch 图标使用<link>tag 指定，如下所示。
|
1个
|
<link rel="apple-touch-icon" href="icon.png"/> |
默认情况下，此图标为 57×57 像素。但是，对于 iPad 和 Retina 设备，我们需要提供更多尺寸。iPad 需要 72x72px 大小的图标，而 Retina 设备需要 114x114px 大小的图标。
因此，总而言之，我们需要在以下规范内提供图标，<head>以支持 iPhone、iPad 和 Retina 设备。
|
1个
2个
3个
|
<link rel="apple-touch-icon" href="icon.png"/><link rel="apple-touch-icon" sizes="72x72" href="icon.png"/><link rel="apple-touch-icon" sizes="114x114" href="icon.png"/> |
默认情况下，iOS 会自动为图标添加养眼效果。
如果您希望图标不干扰此效果，您可以在名称-precomposed末尾添加rel，就像这样。
|
1个
|
<link rel="apple-touch-icon-precomposed" href="icon.png"/> |
刷新网页并重新保存到主屏幕。现在，效果没有添加到图标中。
推荐阅读：自定义图标和图像创建指南– Safari 开发者库
使用 Photoshop 创建 Apple Touch 图标
在我们之前的帖子中，我们讨论了如何使用MacAppIcon创建苹果触摸图标。或者——这也是我的偏好——我们可以使用AppIconTemplate中的 PSD 模板来实现更灵活的定制。
我非常喜欢这个 PSD 模板的另一个功能是它还带有 Photoshop Actions，可以自动将图标保存为多种尺寸，包括用于 iTunes Artwork 的尺寸。
奖励：添加 Windows 8 固定图标
此外，Windows 8 还提供了类似的方法来在具有以下元标记的固定（书签）网站上添加图标。
|
1个
2个
|
<meta name="msapplication-TileImage" content="/metro-tile.png"/><meta name="msapplication-TileColor" content="#015565"/> |
有关在您的网站上实施这些标签的进一步讨论，您可以前往以下 MSDN 帖子。
更多资源
- Favicon 浏览器支持– 信息礼品
- 使用应用程序图标模板制作 iOS 图标– Pixel Resorts
- 为 Web Clip 指定网页图标– Safari Developer Library