当有人把你的网站添加到 iPhone 或 iPad 的主屏幕时，iOS 使用 Apple Touch Icon 作为类似应用的图标。如果没有，iOS 会截取一张难看的页面截图来代替。以下是你需要了解的一切。
什么是 Apple Touch Icon？
Apple Touch Icon 是一种特殊的 PNG 图片，iOS 设备在用户将你的网站添加到主屏幕时使用它。它的效果就像原生应用图标 — iOS 会自动应用标志性的圆角。
在 HTML 中这样声明：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">所需尺寸：180×180 像素
在 2026 年，你只需要一个尺寸：180×180 像素。原因如下：
- iPhone（Retina）— 使用 120×120 或 180×180（iOS 会在需要时将 180 缩小到 120）
- iPad Pro — 使用 167×167（iOS 将 180 缩小）
- iPad — 使用 152×152（iOS 将 180 缩小）
由于 iOS 可以很好地缩小但不能很好地放大，提供最大尺寸（180×180）是最安全的方法。一个文件覆盖所有设备。
历史说明：过去，你需要为每种设备单独提供尺寸（57、60、72、76、114、120、144、152、167、180）。现代 iOS 的缩放处理足够好，仅 180×180 就能完美工作。
文件格式要求
- 格式：仅 PNG（JPEG 也可以但 PNG 是标准）
- 形状：正方形（iOS 自动应用圆角）
- 透明度：避免使用 — iOS 会将透明区域替换为黑色
- 文件名：约定俗成为
apple-touch-icon.png（iOS 也会自动查找这个名称）
HTML 实现
基本写法（一行）
<link rel="apple-touch-icon" href="/apple-touch-icon.png">带明确尺寸
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">自动发现（无需 HTML）
如果你在网站根目录放置名为 apple-touch-icon.png 的文件，iOS 会自动找到它 — 即使没有任何 HTML 声明。但仍然推荐在 HTML 中明确声明以确保可靠性。
设计技巧
- 不要添加圆角 — iOS 会自动应用。如果你自己加了圆角，会出现双重圆角效果。
- 避免透明 — 使用纯色背景。透明区域在 iOS 主屏幕上会变成黑色。
- 保持简洁 — 图标在屏幕上显示约 60px。精细细节不可见。
- 使用品牌色作为背景 — 确保图标在任何壁纸上都能突出。
- 在真机上测试 — iOS 模拟器并不总是与真实设备一致。
常见错误
- 使用透明 → iOS 主屏幕上显示黑色背景
- 手动添加圆角 → 双重圆角效果
- 错误的文件格式 → SVG 不支持；使用 PNG
- 太小 → 提供 57×57 的在现代 Retina 屏幕上看起来模糊
- 忘记测试 → 始终在真实 iPhone 上实际添加到主屏幕来测试
看看其他网站怎么做的
好奇主流网站如何处理 Apple Touch Icon？使用 Mzu favicondl 查看任何网站的 Favicon 配置，包括 Apple Touch Icon。