必须使用rel="apple-touch-icon"声明苹果图标，仅rel="icon"无效；需提供至少180×180 png图标，用sizes属性明确声明尺寸，避免缓存和响应头问题，并与manifest.json共存以兼顾兼容性。
link标签添加苹果图标必须用rel="apple-touch-icon"
iOS设备不会识别普通的 rel="icon" 或 rel="shortcut icon"，必须显式声明 rel="apple-touch-icon"。否则即使图标文件存在，Safari在“添加到主屏幕”时仍会截屏生成模糊图标。
常见错误是只放一个 <link rel="icon"> 就以为够了，或者误用 rel="apple-touch-startup-image"（那是启动图，已废弃）。
- 图标尺寸建议至少提供
180×180（对应 iPhone 15 Pro Max 等机型），iOS 会自动缩放，但不推荐依赖缩放——小图拉大会糊 - 格式必须为 PNG，不支持 SVG、GIF 或带透明通道的变体（iOS 会自动裁成圆角，但 alpha 通道可能导致边缘发灰）
- 路径需为绝对路径或根相对路径，比如
/apple-touch-icon.png；相对路径如images/icon.png在深层路由下容易 404
如何适配不同设备尺寸和倍率
iOS 根据设备像素比（@2x / @3x）和屏幕尺寸选择最匹配的图标，不是简单按文件名后缀匹配，而是靠 sizes 属性声明。
不要只扔一个 apple-touch-icon.png 然后指望系统猜——它大概率选错。
- 给每个关键尺寸加独立
<link>，例如：<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> - 必须包含
sizes属性，值格式严格为"WxH"（不能写"180×180"或"180px"） - 推荐尺寸组合：
120x120（iPhone @2x）、152x152（iPad @2x）、167x167（iPad Pro @2x）、180x180（iPhone @3x） - 不需要为每种尺寸单独命名文件，但文件内容必须是该尺寸的精确 PNG，不能靠 CSS 缩放
为什么加了link还是显示默认图标？排查三件事
典型现象：HTML里写了 <link rel="apple-touch-icon">，但 Safari 添加到主屏幕后仍是网页截图或 Safari 默认图标。
- 检查响应头：服务器返回的图标文件不能带
Content-Disposition: attachment，也不能被防盗链规则拦截（Safari 加载图标时无 referer） - 检查控制台：打开 Safari 开发者工具 → “网络”标签，刷新页面，过滤 PNG，确认图标请求状态码是
200且 MIME 类型是image/png - 检查缓存：iOS 对 apple-touch-icon 缓存极强，改完 HTML 后需彻底关闭 Safari 进程（双击 Home 键上划），再重新“添加到主屏幕”
不推荐用manifest.json替代，尤其对老iOS版本
虽然现代 PWA 可用 web_app_manifest.json 声明 icons，但 iOS 直到 16.4 才开始有限支持（且仅限部分字段），低于该版本完全忽略。
这意味着：只靠 manifest 不写 <link rel="apple-touch-icon">，在 iPhone 上基本等于没设图标。
所以正确做法是两者共存——<link> 保底兼容所有 iOS，manifest 用于 Android 和桌面 PWA：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.json">
真正容易被忽略的是：iOS 不读取 manifest 里的 icon 路径，哪怕你 manifest 写得再全，<link> 这一行少不得。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
