您可能希望用户能够将您的 Web 应用程序或网页链接添加到主屏幕。这些由图标表示的链接称为 Web Clip。按照这些简单的步骤指定一个图标来代表您在 iOS 上的 Web 应用程序或网页。
要为整个网站（网站上的每个页面）指定一个图标，请将一个 PNG 格式的图标文件放在名为apple-touch-icon.png
要为单个网页指定图标或将网站图标替换为特定于网页的图标，请向网页添加链接元素，如下所示：
<link rel="apple-touch-icon" href="/custom_icon.png">
在上面的示例中，替换custom_icon.png为您的图标文件名。
要为不同的设备分辨率指定多个图标（例如，同时支持 iPhone 和 iPad 设备），sizes请为每个链接元素添加一个属性，如下所示：
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
使用最适合设备大小的图标。
如果没有与设备推荐尺寸匹配的图标，则使用大于推荐尺寸的最小图标。如果没有大于建议大小的图标，则使用最大的图标。
如果没有使用链接元素指定图标，则在网站根目录中搜索带有apple-touch-icon...前缀的图标。例如，如果设备的适当图标大小为 58 x 58，则系统会按以下顺序搜索文件名：
apple-touch-icon80x80.png
apple-touch-icon.png
注意： iOS 7 上的 Safari 不会为图标添加效果。旧版本的 Safari 不会为以-precomposed.png后缀命名的图标文件添加效果。