你用 <link rel='icon' type='image/svg+xml'> 给网站加了一个漂亮的 SVG favicon。在 Chrome 里显示得很清晰，dark mode 下缩放也毫无压力——但当 iPhone 用户把网站存到主屏幕时，拿到的却是一张糊掉的页面截图，而不是你那张锐利的 logo。
其实你并没有做错什么。在 Apple 眼里，Apple Touch Icon 和 SVG 是两码事，它们之间的关系连经验丰富的开发者也会绕进去。下面我会把 Safari 和 iOS 现阶段到底支持什么讲清楚，以及怎么搭出一套在所有场景下都清晰的方案。
简短结论：Apple 并没有官方支持 apple-touch-icon 的 SVG
Apple 关于 apple-touch-icon link 关系的文档，从未把 SVG 列为受支持格式。iOS 仍然期望主屏幕图标是 PNG（或者用得比较少的 JPEG）位图，并且根据 size 属性挑选文件——而不是 MIME type。
真正被良好支持的是通过 rel='icon' 使用的 SVG favicon，Safari 会读取它用于浏览器标签页和固定标签页。WHATWG HTML 现行标准将 rel='icon' 关键字 定义为声明页面图标的机制，iOS Safari 对 SVG 的实现也挺干净。但那是与主屏幕完全不同的一条代码路径。
所以当开发者搜索 apple touch icon SVG 支持时，老实的回答是：两个都上。标签页用 SVG，主屏幕用 PNG。把 apple-touch-icon 指向 SVG 文件，iOS 会静悄悄地回退到页面截图，也就是你想要避开的那张糊掉的方块。
前置条件
- 一份干净的 SVG 源文件（正方形
viewBox，比如0 0 100 100，理想情况下控制在 5 KB 以内） - 同一份设计的 180×180 PNG 导出，背景不透明
- 可以编辑站点
<head>，并能把文件放到 web 根目录
真正能跑起来的方案（分步骤）
步骤 1：把 SVG favicon 放到站点根目录
把 SVG 文件放到 /icon.svg（与 index.html 同级）。文件名保持 icon.svg 是有意为之 —— Safari 会先检查这个路径，再去扫描 <link> 标签，这样 <head> 里也会更清爽。
第二步：导出一张 180×180 的 PNG 作为 apple-touch-icon
用 Figma、Sketch 或者任何栅格导出工具，把同一份 SVG 导出成 180×180 的 PNG，保存到站点根目录下的 /apple-touch-icon.png。iOS 即便没有 <link> 标签也会自己找到这个文件，但显式写一个标签在不同 iOS 版本里更稳定。
如果你不想重新描摹 SVG，直接把它转成一张干净的 180×180 PNG，Mzu favicondl 可以一键完成导出。
第三步：按正确顺序添加 link 标签
浏览器解析标签是有顺序的。把 SVG 放前面，让现代浏览器优先读取它，然后再放 PNG 兜底。参考写法如下：
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>注意 apple-touch-icon 这条 link 上没有 type 属性 —— Apple 历来会忽略它，而且一些较早的 iOS 版本一旦看到不支持的 MIME 类型，会直接拒绝这条标签。sizes='180x180' 才是告诉 iOS 在高密度 iPhone 上使用这个具体渲染的关键。
第四步（可选）：用 152×152 兜底覆盖老款 iPad
如果你的统计里还有用户在用 iOS 14 及更早版本的 iPad，可以在 180 之前再加一条 152×152 的：
<link rel='apple-touch-icon' href='/apple-touch-icon-152.png' sizes='152x152'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>浏览器和 iOS 会挑满足所需密度的最小资源。想深入了解老版本 iOS 的分辨率细节，可以看 Apple Touch Icon 尺寸指南。
常见坑
- 把 apple-touch-icon 指向 SVG 文件。 iOS 会静默回退为页面截图。该 URL 一定要提供真实的 PNG。
- 在 apple-touch-icon link 上加 type='image/svg+xml'。 部分老版本 iOS 会直接拒绝这个标签。apple-touch-icon link 上不要带 type。
- 忘了保持正方形长宽比。 iOS 不会裁剪你的图标——非正方形的 PNG 会被信箱模式留出黑边。一定要从正方形的 SVG
viewBox导出。 - 透明 PNG 在启动屏上「漏底」。 iOS 虽然会套一层自带的圆角矩形遮罩，但在冷启动的启动图阶段，透明背景仍可能透出来。除非你确实需要透明，否则就用不透明的背景——详见我们的 apple touch icon 透明背景指南。
如何在真机上验证
模拟器对 iOS 图标行为的模拟并不可信。要确认 PNG 真的渲染出来：
- Mac 上的 Safari → 文件 → 添加到主屏幕（需要 iPhone 与 Mac 配对，否则直接用设备操作）。
- 在 iPhone 上：用 Safari 打开站点，点分享 → 添加到主屏幕，在点确认前检查图标。
- 清掉 Safari 缓存后再复检一次——如果旧图标还在，按 Safari favicon 缓存清理指南 操作。
那到底要不要折腾 SVG？
要——除了 iOS 主屏幕以外，其他场景都用 SVG。SVG 能给你清晰的 Safari 标签页、通过内联 media query 自动切换深色模式，并让品牌素材有唯一的「真相来源」。PNG 版的 apple-touch-icon 则刚好满足 iOS 的实际期望。两者结合，是唯一能在 Apple 的所有界面——标签页、固定标签、书签、主屏幕——都站得住脚的方案。
别再靠猜来决定格式支持了。Mzu favicondl 能在一个工作流里，把你的 SVG 同时转成 PNG 版 apple-touch-icon 和多分辨率 ICO。