iOS 添加网页到主屏幕时仅识别apple-touch-icon，需在HTML head中显式声明带sizes的link标签或提供指定尺寸的PNG文件（如180x180），路径须公网可访问且返回正确MIME类型，修改图标必须更改文件名才能刷新缓存。
iOS 设备添加网页到主屏幕时，apple-touch-icon 是唯一被 Safari 尊重的图标来源——favicon.ico 或 manifest.json 中的 icons 在此场景下完全无效。
怎么让 iOS 正确加载 apple-touch-icon
关键不是“有没有”，而是“能不能被 Safari 自动发现并解析”。Safari 会按固定顺序查找：
- HTML
<head>中显式声明的<link rel="apple-touch-icon" href="...">（推荐） - 根目录下名为
apple-touch-icon.png的文件（无 HTML 声明时 fallback） - 若未指定尺寸，Safari 默认按 180×180 像素裁切，但实际会尝试读取多种尺寸
注意：apple-touch-icon-precomposed.png 已废弃，iOS 12+ 完全忽略该后缀；也不需要加 precomposed 属性。
尺寸、格式与命名必须匹配 iOS 要求
iOS 对尺寸极其敏感，错误尺寸会导致图标变灰、拉伸或直接不显示。必须提供至少一个明确尺寸的 PNG：
立即学习“前端免费学习笔记（深入）”；
Apple Serial Lookup
下载
根据序列号查询 Apple 设备信息。支持 iPhone、iPad、Mac（MacBook、iMac、Mac mini、Mac Pro、Mac Studio）、Apple Watch、Apple TV 和 iPod。用户提供序列号时，可用于识别设备、查看规格、生产日期/地点、保修状态或获取详细型号信息。
- 最低要求：
apple-touch-icon-180x180.png（用于 iPhone X 及更新机型） - 推荐组合：
apple-touch-icon-120x120.png（iPhone）、apple-touch-icon-152x152.png（iPad）、apple-touch-icon-167x167.png（iPad Pro）、apple-touch-icon-180x180.png（iPhone Plus/12+/13+/14+/15+） - 全部使用 PNG 格式，透明背景会被 iOS 自动填充为黑色（非圆角背景），所以建议导出带圆角和阴影的完整图标（即「已设计好视觉效果」的 PNG，而非原始矢量稿）
- 不要用 SVG —— iOS 不支持
apple-touch-icon的 SVG 版本
HTML link 标签写法与常见失效原因
最稳妥的方式是显式声明，并指定 sizes。以下写法可覆盖绝大多数设备：
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
容易踩的坑：
-
href路径必须可被公网访问（本地开发用http://localhost无法触发 iOS 缓存） - 服务器需返回
Content-Type: image/png，Nginx/Apache 若未配置 PNG MIME 类型，图标会静默失败 - 不要加
type="image/png"属性 —— Safari 忽略它，且某些旧版 WebKit 会因此拒载 - 避免使用查询参数如
?v=2—— iOS 缓存逻辑对 URL 参数极不友好，极易导致图标不更新
验证是否生效的实操方法
不能只看桌面快捷方式生成成功，要验证图标是否真正加载：
- 在 iOS Safari 中打开页面 → 点击分享按钮 → 滚动到底部点「添加到主屏幕」→ 观察预览图标的清晰度和形状
- 添加后长按主屏幕图标 → 出现「编辑主页」菜单时，图标若模糊、方形或带白边，说明尺寸或格式不对
- 真机调试：用 macOS 的 Safari 开发者工具连接 iOS 设备，在 Network 面板过滤
apple-touch-icon，确认对应 PNG 返回 200 且 size 字段匹配 - 注意：iOS 会强缓存
apple-touch-icon，修改后需删除主屏幕图标 + 清除 Safari 缓存 + 重启设备才能刷新（无捷径）
最常被忽略的一点：iOS 不读取 HTTP 响应头里的 Cache-Control 来决定图标更新时机，它有自己的内部缓存策略，一旦缓存就只认 URL 变更 —— 所以生产环境换图标，务必改文件名，别只改内容。
