当 iOS Safari 用户将渐进式 Web 应用 (PWA) 添加到主屏幕时,显示的图标称为 Apple 触摸图标。您可以通过在页面的 <head>
中添加 <link rel="apple-touch-icon" href="/example.png">
标记来指定应用应使用的图标。如果您的网页没有此链接标记,iOS 会通过截取网页内容来生成图标。换言之,指示 iOS 下载图标可以带来更完善的用户体验。
Lighthouse Apple 触摸图标审核如何失败
Lighthouse 会对 <head>
中不含 <link rel="apple-touch-icon" href="/example.png">
标记的页面进行标记:
![未提供有效的 apple-touch 图标](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png?authuser=1&hl=da)
Lighthouse 不会检查图标是否实际存在,或者图标的大小是否正确。
如何添加 Apple Touch 图标
将
<link rel="apple-touch-icon" href="/example.png">
添加到页面的<head>
:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
将
/example.png
替换为图标的实际路径。
为了提供良好的用户体验,请确保:
- 图标为 180x180 像素或 192x192 像素
- 指定的图标路径有效
- 图标的背景不透明