当我查看favorite website的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需要专用的快捷图标才有什么特别之处？
答案 0 :(得分：10)
iOS为网站和应用程序提供了“Web Clips”概念。 iOS Web应用程序在iOS设备上的存在有两个主要的前端部分：主屏幕图标（或Web剪辑图标）及其启动图像。这些分别由apple-touch-icon和apple-touch-startup-image表示。
传统的favicons和主屏幕图标之间的主要区别是：
主屏幕图标的分辨率更高。即使是最小的图标尺寸（29x29）也比传统的图标尺寸大16x16。 ICO格式的Favicons可以提供高分辨率替代品，但是在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内容指南，尤其是Configuring Web Applications部分。
答案 1 :(得分：8)
当Mac iOS用户将网站书签或保存到他们的iOS系统，移动设备等时，网页会作为页面的屏幕截图保存到主屏幕，这可能非常不讨人喜欢。
为您的网站设置Apple Touch图标将全面提升您的网站对iOS用户的视觉优化，这可能非常讨人喜欢..
Apple Touch图标大小
聚焦所有设备
<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" />
答案 2 :(得分：2)
如果您将网站添加到主屏幕，则可以看到图像。
有关详细信息，请参阅Safari Web Content Guide。
答案 3 :(得分：2)
所有当前答案仅部分回答问题。他们解释apple-touch-icon的含义，但不解释image_src的含义。
这answer帮助我理解了image_src的含义。以下是他所说的：
image_src确实已在那里注册，其中包含用于“指定供Facebook，Yahoo，Digg等使用的网页图标”的信息，未确定任何规范，但有关于它被链接到，并且它“可能与rel = icon一样多余。”
我想添加到这个答案image_src是当我们想要在图标支持PNG图像时代表网站时使用的推荐图像。虽然rel=icon是传统的做法 - 可能是在应用程序（即：浏览器）不支持png时。