为什么要使用 <link rel="apple-touch-icon image_src" ...>？

Question

当我查看我 最喜欢的网站 的 HTML 源代码时，我注意到它正在使用

<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon image_src" href="apple-touch-icon.png">

显然第二个链接与 Apple 的 iOS 有关，但为什么 <link rel="shortcut icon" href="favicon.ico"> 不够？ iOS 有什么特别之处，它有一个专用的 html 链接 rel 标签？

原文由 Mike Pennington 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

iOS 有一个用于网站和应用程序的“Web Clip”概念。 iOS Web 应用程序在 iOS 设备上的存在有两个主要的前端部分：它的主屏幕图标（或 Web Clip 图标）和它的启动图像。它们分别由 apple-touch-icon 和 apple-touch-startup-image 表示。

传统网站图标和主屏幕图标之间的主要区别是：

• 主屏幕图标具有更高的分辨率。即使是最小的图标尺寸 29x29，也比传统的图标尺寸 16x16 大。 ICO 格式的网站图标可以有高分辨率的替代品，但在 iOS 引入 Web Clips 时它们并没有得到很好的支持。

• 7 之前的 iOS 会默认对图标应用光泽效果，使它们在主屏幕上看起来像家一样。为了让开发人员可以选择关闭此效果，Apple 提供了另一个可能的值 apple-touch-icon-precomposed 。当然，在 iOS 7 中不再应用这些效果，但以前是这样。

由于主屏幕图标与网站图标有着根本的不同，因此尝试让现有的快捷方式图标方案在 iOS 上运行是没有意义的。因此， apple-touch-icon （和 apple-touch-icon-precomposed ）。

当然，随着 iPad 和 Retina 显示屏（以及两者的结合）的推出，主屏幕图标现在有各种尺寸。现在 Apple 有自己的图标类型可以使用它可以简单地引入自己的 sizes 属性来为不同的大小提供不同的图标文件。

有关 iOS 中 Web 应用程序的更多详细信息，请参阅 Safari Web 内容指南，尤其是 配置 Web 应用程序 部分。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

当 Mac iOS 用户通过移动设备等将网站添加为书签或保存到他们的 iOS 系统时，该网页将作为页面的屏幕截图保存到主屏幕，这可能非常不讨人喜欢。

为您的网站设置一个 Apple Touch 图标将全面提升您的网站对 iOS 用户的视觉优化，这非常讨人喜欢。

Apple Touch 图标大小

• 144 x 144 是具有视网膜显示屏的 iOS 的完美尺寸。将为其他设备压缩图标。
• 72 x 72 用于 iPad，114 x 114 用于 iPhone。

聚焦所有设备

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

聚焦多个设备

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

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-retina-ipad.png" />

原文由 Sridhar R 发布，翻译遵循 CC BY-SA 3.0 许可协议