apple-touch-icon 是当有人将你的网站添加到 iPhone 或 iPad 主屏幕时,iOS 使用的图片。它也会作为 Mac 上 Safari 固定标签页的图标出现。如果没有它,iOS 会显示一个通用的截图缩略图——这是错失的品牌展示机会。本指南涵盖精确尺寸、正确的标签写法,以及如何修复常见的审计失败。
简短回答
- 尺寸:180×180 像素,PNG
- 文件名:
apple-touch-icon.png - 标签:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
apple-touch-icon link 标签
在每个页面的 <head> 中添加:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">也可以为旧设备声明多个尺寸,但仅 180×180 即可覆盖所有现代 iPhone 和 iPad(iOS 会自动缩小):
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">需要快速得到 180×180 PNG? 将你的 logo 上传到 Favicon.one——输出包中包含正确尺寸的
apple-touch-icon.png。
Apple touch icon 设计准则
- 填满整个正方形。iOS 会自己圆角化——不要预先做圆角或添加内边距。
- 不要透明。使用纯色背景;透明区域在 iOS 上会渲染为黑色。
- 保持简洁。在 180px 及更小尺寸下,细节会丢失。粗壮的形状和高对比度胜出。
- 在真机上测试。将网站添加到主屏幕,看看实际效果。
为什么 Lighthouse 会标记你的 apple-touch-icon
Google Lighthouse 的 PWA 审计会检查是否存在有效的 apple-touch-icon。常见的失败原因:
- 完全没有标签——添加
<link rel="apple-touch-icon">标签。 - 文件 404——确认
/apple-touch-icon.png确实存在并能加载。 - 尺寸错误——必须至少为 144×144;推荐 180×180。
- 非正方形图片——图标的宽高必须相等。
将你的网站运行 Favicon Checker 来验证。
apple-touch-icon 与 favicon 的区别是什么?
| favicon.ico / PNG | apple-touch-icon.png | |
|---|---|---|
| 使用者 | 浏览器标签页、书签 | iOS 主屏幕、Safari 固定标签页 |
| 尺寸 | 16、32、48 | 180×180 |
| 透明度 | 支持 | 避免使用(会渲染为黑色) |
| 圆角 | 保持原样 | 由 iOS 自动圆角化 |
完整配置需要两者兼备——请参阅 完整尺寸指南。
"Precomposed"图标(历史遗留)
较旧的 iOS 版本支持 rel="apple-touch-icon-precomposed" 来阻止 iOS 添加光泽效果。现代 iOS 已完全忽略光泽效果,因此如今只需普通的 apple-touch-icon 即可。