apple-touch-icon 是苹果设备添加网页到主屏幕时显示的专用图标，不能仅用 favicon 因为 ios safari 不识别 favicon.ico 作为启动图标；必须提供正方形 png 格式、无圆角无边框的特定尺寸图片，并通过 link 标签声明绝对路径。
apple-touch-icon 是什么，为什么不能只用 favicon
苹果设备（iOS Safari、iPadOS）不会自动从 favicon.ico 提取启动图标，它只认特定命名和尺寸的 apple-touch-icon 图片。如果你只放了普通 favicon，Safari 会显示一个灰色占位符或截取网页首屏——这不是你想要的“启动图标”。
真正的 apple 启动图标是用户将网页添加到主屏幕时显示的图标，不是地址栏小图标（那是 favicon），也不是 PWA 的 manifest.json 图标（那用于 Android 和桌面 PWA）。
必须提供的尺寸与 link 标签写法
苹果设备会按需选择最匹配的尺寸，但最低要求是提供至少一个 apple-touch-icon，推荐同时提供多个尺寸以覆盖不同设备（尤其是 iPhone 15 Pro Max 和 iPad Pro 的高分辨率屏）。
-
<link rel="apple-touch-icon" href="/apple-touch-icon.png">—— 基础声明，不带sizes时默认按 180×180 解析 -
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">—— 显式声明，优先匹配 iPhone 主屏幕 -
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">—— iPad Pro（非 retina 屏老设备已淘汰，但 167×167 仍是官方推荐尺寸） - 不要用
sizes="any"或 SVG —— iOS 不支持 SVG 作为apple-touch-icon
注意：href 路径必须是绝对路径（如 /icons/apple-touch-icon-180x180.png）或完整 URL，相对路径在添加到主屏幕后容易 404。
使用 inotes CLI 从终端管理 Apple Notes。当需要在 macOS 的 Notes.app 中列出、读取、创建、编辑、删除或搜索备忘录时使用。
图片制作的关键细节
苹果对 apple-touch-icon 有隐式处理逻辑：它会自动添加圆角、阴影和反光效果。所以你的原始图必须是正方形、无圆角、无边框、无透明底（推荐纯白背景），否则叠加后会变形或发虚。
- 尺寸必须严格为正方形像素（如 180×180，不是 180×181）
- 保存为 PNG（无损，支持 alpha，但建议不用透明背景）
- 不要加内边距（padding）——苹果不会帮你居中裁切，它直接拉伸或居中放置整图
- 设计区域建议留出 20% 安全边距（即核心图形控制在 144×144 区域内，针对 180×180 图）
- 可以用
convert -resize 180x180 -background white -gravity center -extent 180x180 input.png output.png批量规整
验证是否生效的实操方法
本地开发时刷新页面没用——apple-touch-icon 只在用户点击「分享 → 添加到主屏幕」时加载一次，之后缓存。改完后必须清空 Safari 缓存并重新添加。
- 在 iOS Safari 中打开网页 → 点击底部分享按钮 → 滚动到底部点「添加到主屏幕」→ 观察弹出图标是否清晰
- 如果看到模糊、拉伸或灰色方块，检查控制台 Network 标签页，过滤
apple-touch-icon，看是否返回 404 或 MIME 类型错误（应为image/png） - 用 macOS Safari 的「开发 → 响应式设计模式」模拟 iOS 设备，再执行添加操作（比真机更快迭代）
- 不要依赖 Lighthouse 或在线检测工具——它们只检查标签是否存在，不验证实际渲染效果
最容易被忽略的是：图标文件部署后未更新 HTTP 缓存头（比如 Cache-Control: max-age=31536000），导致改了图却一直显示旧版本。上线前务必确认 CDN 或服务器已刷新该路径资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
