当我查看 favorite website 的 HTML 源代码时，我注意到它正在使用
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon image_src" href="apple-touch-icon.png">
显然第二个链接与苹果的 iOS 有关，但为什么<link rel="shortcut icon" href="favicon.ico"> 还不够呢？ iOS 需要专门的快捷方式图标有什么特别之处？
【问题讨论】：
iOS 有一个用于网站和应用程序的“Web Clips”概念。 iOS Web 应用程序在 iOS 设备上的存在有两个主要的正面部分：主屏幕图标（或 Web Clip 图标）和启动图像。这些分别由apple-touch-icon 和apple-touch-startup-image 表示。
传统网站图标和主屏幕图标的主要区别在于：
主屏幕图标具有更高的分辨率。即使是最小的图标尺寸（29x29）也大于传统的图标尺寸（16x16）。 ICO 格式的网站图标可以有高分辨率的替代品，但在 iOS 引入 Web Clips 时它们并没有得到很好的支持。
iOS 7 之前的版本默认会对图标应用光泽效果，以使它们在主屏幕上看起来像主页。为了让开发人员可以选择关闭此效果，Apple 提供了另一个可能的值，apple-touch-icon-precomposed。当然，在 iOS 7 中不再应用这些效果，但以前就是这样。
由于主屏幕图标与网站图标有着本质的不同，因此尝试让现有的快捷方式图标方案在 iOS 上运行是没有意义的。因此，apple-touch-icon（和apple-touch-icon-precomposed）。
当然，随着 iPad 和 Retina 显示屏（以及两者的结合）的推出，主屏幕图标现在有各种尺寸。既然 Apple 有自己的图标类型可以使用，它可以简单地引入自己的 sizes 属性来为不同大小提供不同的图标文件。
有关 iOS 中 Web 应用程序的更多详细信息，请参阅 Safari Web 内容指南，尤其是 Configuring Web Applications 部分。
【讨论】：
当 Mac iOS 用户通过移动设备等为他们的 iOS 系统添加书签或将网站保存到他们的 iOS 系统时，网页会作为页面截图保存到主屏幕，这可能非常不讨人喜欢。
为您的网站设置一个 Apple Touch Icon 将全面提升您网站对 iOS 用户的视觉优化，这可能非常讨人喜欢..
Apple 触控图标大小
关注所有设备
<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" />
【讨论】：
如果您将网站添加到主屏幕，您可以看到该图像。
详情请参阅Safari Web Content Guide。
【讨论】：
所有当前答案仅部分回答了该问题。他们解释了apple-touch-icon的含义，但没有解释image_src的含义。
这个answer帮助我理解了image_src的含义。他是这样说的：
image_src确实已经在那里注册了，其信息是“指定一个网页图标供 Facebook、Yahoo、Digg 等使用”，没有确定规范，但有一篇关于它的文章链接到，并且“可能与 rel=icon 冗余”。
我会在此答案中添加image_src 是当我们希望在图标支持PNG 图像时表示网站时使用的推荐图像。虽然rel=icon 是传统的做法 - 可能是当应用程序（即：浏览器）不支持 png 时。
【讨论】：
image_src 不是标准，rel=icon 是。如果必须使用丰富的 sn-ps，Facebook 将回退到使用 image_src。它与图标无关。