苹果设备主屏幕图标必须使用rel="apple-touch-icon"声明png格式图标，仅link rel="icon"无效；推荐180×180尺寸，需绝对或根相对路径，禁用alpha通道，文件名规范且服务器返回正确mime类型。
苹果设备访问网页时，如果没配 apple-touch-icon，书签到主屏幕后图标会是网页截图——模糊、拉伸、不专业。配了，才能显示你指定的高清图标。
为什么 apple-touch-icon 不能只靠 link rel="icon" 替代
Chrome 或 Firefox 的 favicon.ico 对苹果无效；iOS Safari 完全忽略 rel="icon"，只认 rel="apple-touch-icon"。而且它不支持 .ico 格式，必须是 PNG（无透明通道更稳妥）。
- 必须用
<link rel="apple-touch-icon" href="icon-180.png">显式声明 - 路径必须是绝对 URL 或根相对路径（如
/icons/icon-180.png），相对路径（如./icon.png）在某些 iOS 版本中会失败 - 苹果会自动添加圆角和高光效果，所以设计时要预留安全边距，别把关键内容放在边缘
apple-touch-icon 尺寸怎么选：180×180 是底线，不是唯一
iOS 设备实际用的尺寸取决于机型和系统版本，但 180×180 是当前所有主流设备（iPhone 6s+、iPad Pro 等）的最小共用尺寸。只放一个 180×180 图标能覆盖绝大多数情况，但想兼容更老设备（如 iPhone 4S）或 iPad mini，可额外提供：
Apple Silicon Ai
下载
Apple Silicon AI — 在 Mac Studio、Mac Mini、MacBook Pro 和 Mac Pro 上运行大语言模型（LLM）、图像生成、语音转文字及嵌入（embeddings）。将您的 Apple Silicon 设备…
-
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">（iPhone Retina） -
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">（iPad non-Retina） -
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">（iPhone 6/7/8/X 及更新）
注意：sizes 属性值必须与图片真实尺寸一致，否则 iOS 可能忽略该标签；多个 apple-touch-icon 标签会被并列解析，系统选最匹配的，不按顺序 fallback。
生成图标时容易被忽略的三个细节
很多团队用在线工具一键生成，结果图标在主屏幕显示异常——问题常出在元数据和导出设置上：
- 导出为 PNG 时禁用 Alpha 通道（即去掉透明背景），否则 iOS 可能渲染成黑底或灰底
- 文件名不要含中文、空格或特殊符号（如
我的图标@2x.png），服务器可能 404；推荐用小写英文加连字符（apple-touch-icon-180.png） - 确保 Web 服务器对
.png文件返回Content-Type: image/png，某些老旧 Nginx 配置漏配 MIME 类型会导致图标加载失败，且无明显报错
真正麻烦的不是生成几个图，而是验证：真机 Safari 打开页面 → 分享 → “添加到主屏幕” → 回 home screen 看效果。模拟器和桌面 Safari 的“添加到主屏幕”行为和真机不一致，别信预览图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
