当 iOS Safari 用户将渐进式 Web 应用 (PWA) 添加到
用户的主屏幕上,显示的图标称为 Apple Touch 图标。
您可以通过添加
<head>
中的<link rel="apple-touch-icon" href="/example.png">
标签
页面。如果您的网页没有此链接标记,iOS 会通过抓取屏幕截图来生成图标
网页内容换言之,指示 iOS 下载图标可以生成更精美的
用户体验。
Lighthouse Apple Touch 图标审核失败的原因
灯塔
标记不含 <link rel="apple-touch-icon" href="/example.png">
的网页
<head>
标记中:
![未提供有效的 Apple 触摸图标](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/apple-touch-icon/image/does-provide-valid-appl-cc7f9dc2832c7.png?authuser=0000&hl=el)
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 像素
- 指定的图标路径有效
- 图标的背景不透明