设置桌面图标

更新时间:2022-05-21 20:40

您可能希望用户能够将您的 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后缀命名的图标文件添加效果。