rel="apple-touch-icon" 是 iOS 保存网页到主屏幕时唯一有效的图标机制，但仅当路径为根相对或绝对、图片为180×180无透明通道PNG且服务端返回200时才生效。
iOS 保存网页到主屏幕时，rel="apple-touch-icon" 标签不是“可选配置”，而是唯一被 Safari 主动抓取并用于生成桌面图标的机制——但它只在特定条件下生效，且不回退到其他 fallback。
为什么加了 rel="apple-touch-icon" 还是显示网页截图
这不是标签没被读到，而是 Safari 请求了 href 指向的资源，但服务端返回了非 200 响应（如 404、302 重定向到登录页）、或图片本身不满足硬性要求。常见失效链路：
-
href是相对路径（如./icon.png），而当前页面 URL 含 query 参数（如/home?ref=abc），浏览器拼出错误地址 - 图片实际尺寸 ≠ 180×180 像素（比如导出时勾选「适配画布」导致留白，或缩放拉伸）
- PNG 文件含 alpha 通道（哪怕只有 1% 透明像素），iOS 会自动填黑底，但边缘发灰、模糊，视觉上等同于“失效”
- 用了协议相对路径（
//example.com/icon.png），部分 iOS 版本（尤其 iOS 15–16）解析失败 - 误加
sizes、type或media属性——iOS 完全忽略这些，某些旧 WebKit 甚至因此跳过整个<link>
rel="apple-touch-icon" 的路径必须是根相对或绝对
iOS 对路径解析极其严格，只认两种格式：
- 根相对：
/icons/apple-touch-icon-180x180.png（开头是/） - 绝对：
https://example.com/icons/apple-touch-icon-180x180.png（含协议 + 域名）
不能用：./icon.png、icons/icon.png、//example.com/icon.png。即使本地开发时看似能加载，上线后因 base URL 变化或 CDN 配置差异，极易 404。
Apple Media
下载
在 macOS 上发现并控制 Apple 媒体/AirPlay 设备（HomePod、Apple TV、AirPlay 扬声器）。适用于扫描 AirPlay 设备、映射名称到 IP/ID、配对连接，以及利用 pyatv 和 Airfoil 控制播放与音量。
多尺寸 sizes 在主屏幕图标中基本无效
虽然文档提过 sizes="114x114" 等，但 iOS 主屏幕逻辑只优先匹配 180×180；其他尺寸仅在极老设备（iOS ≤ 6）或第三方阅读器中起作用。现代实践：
- 只提供一个
<link rel="apple-touch-icon" href="/icon-180.png">即可覆盖 iPhone SE（2nd）到 iPhone 15 Pro 全系列 - 多个
<link>不提升效果，反而增加 HTML 体积和请求干扰 - 若仍要兼容旧版，必须按尺寸从大到小排列（180×180 → 152×152 → 120×120），否则 iOS 可能选错
图标文件本身比标签写法更容易踩坑
真正决定成败的是 PNG 文件质量，而非 HTML 写法：
- 用 Photoshop 导出时关掉「杂边」和「透明度」；Figma 导出选「无背景」+ 关闭「导出透明背景」
- 用命令行验证：
file icon-180.png应显示PNG image data, 180 x 180, 8-bit/color RGB（不含alpha字样） - 用
curl -I https://example.com/icon-180.png确认返回状态码是200 OK，且Content-Type: image/png - 不要依赖「自动圆角」「高光效果」——iOS 渲染时会统一加圆角和阴影，原始图必须是正方形、纯色底、居中图标
最常被忽略的一点：即使所有代码都对，只要服务器对 /icon-180.png 返回了 302（比如重定向到 SSO 登录页），iOS 就静默 fallback 到截图——这个过程没有任何提示，开发者只能靠 curl 或 Network 面板确认响应链。
