HTML apple-touch-icon 标籤设定


配置 Apple iOS 网页图示 apple-touch-icon 标籤设定,由图示表示的连结称为 Web Clip。只需简单步骤指定来表示 iOS 上的网页图示,用于在添加到 iOS 的主萤幕时表示。如果没设定 apple-touch-icon 设备会採用 screenshot 画面补捉建立一个图示。这些都是可选设置,添加到网页 HTML 内容时会被其他平台忽略。

将整个网站(网站上的每个页面)统一指定相同图示,可将 PNG 格式的图示档例如 apple-touch-icon.png 放在网站 Root folder 根目录中的资料夹,再将 link 连结元素添加到每个网页中。

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

若特定单个网页指定图示,于 link 连结元素添加到各别网页中,再依指定更改 custom_icon.png 为该页图示档名称。

https://developer.apple.com/library/.../ConfiguringWebApplications.html


不同的设备解析度

为不同的设备解析度指定多个图示。例如同时支援 iPhone 和 iPad 设备。向每个 link 链接元素添加一个 sizes 属性。

<head>
<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">
</head>

网页图示 apple-touch-icon 标籤、如果没有与设备的推荐大小匹配的图示,则使用大于推荐大小的最小图示。如果没有大于推荐大小的图示,则使用最大的图示。如果未使用 link 连结元素指定图示,而网站根目录被搜索带有 apple-touch-icon 前缀的图示,如果设备的相应图示大小为 58 x 58,系统将按以下顺序搜寻档名。

apple-touch-icon-80x80.png apple-touch-icon.png




App Icon Sizes 应用图示大小

安装应用时,每个应用都必须提供小图示,以便在主屏幕和整个系统上显示,以及一个较大的图示,以便在 App Store 中显示。

Device 设备Icon size
iPhone60x60 pt (180x180 px @3x)
60x60 pt (120x120 px @2x)
iPad Pro83.5x83.5 pt (167x167 px @2x)
iPad, iPad mini76x76 pt (152x152 px @2x)
App Store1024x1024 pt (1024x1024 px @1x)

👎 而早期的 apple-touch-icon-precomposed 已经从 iOS 7 被废弃。