Safari 26 支持 SVG 图标用于所有界面表面

为何现在重要

• 历史上图标依赖多张位图文件（PNG、ICO）适配不同场景。这增加带宽开销与维护复杂度。
• Safari 26 beta 开始在所有界面表面支持 SVG 图标，包括 favicon、主屏幕、Dock、标签页与菜单。
• 单个 SVG 自动栅格化为所需尺寸，降低下载量并简化图标流程。

Safari 26 中 SVG 图标的用途

浏览器表面

• 地址栏 favicon
• 标签页图标
• 浏览器菜单
• Safari start page（阅读列表、iCloud 标签页、建议、收藏）

Web app 表面

• 主屏幕图标
• Dock 图标
• 平台特定小组件和快捷方式

这些尺寸差异巨大——从 16×16（标签页）到某些设备上的 1024×1024（主屏幕）。SVG 保证所有尺度下品质一致。

实现要点

基础 SVG favicon

<link rel="icon" href="/icon.svg">

Web app manifest 图标

在 manifest 中指向 SVG：

{
  "icons": [
    {
      "src": "/icon.svg",
      "sizes": "any",
      "type": "image/svg+xml"
    }
  ]
}

Data URL 支持

Safari 26 也支持 Data URL 图标，可直接嵌入文档：

<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB...c3ZnPg==">

实践清单

• [ ] 创建一个正方形 SVG 图标，保持品牌一致性。
• [ ] 针对 SVG 做尺寸优化（去除多余路径，使用正确 viewBox）。
• [ ] 在多个尺寸下测试 SVG（16×16、32×32、96×96、512×512），确保可读性。
• [ ] 在支持的地方用单个 SVG 替换多个 PNG/ICO。
• [ ] 验证图标在 Safari 标签页、主屏幕和 Dock 中正确显示。
• [ ] 为不支持的浏览器保留 PNG/ICO 兜底。

避免什么

• 不要使用过于复杂的 SVG，影响性能或栅格化质量。
• 不要忘记为不支持 SVG favicon 的旧浏览器准备位图兜底。
• 不要只依赖 SVG 而不在不同尺寸下检查对比度，尤其是在小场景如标签页。
• 不要假定 SVG 在所有上下文中栅格化效果一致；请在核心表面测试。

这对 PWA 品牌的意味

享受 SVG 图标，你的 web app 品牌在每个触点都清晰锐利。同一个图标既代表主屏幕上的应用，也在标签页、菜单和 start 页以正确分辨率出现。

对用户而言，这意味着在交互的每一阶段都获得可识别的图标形象——从 Safari start 页的发现，到主屏幕与 Dock 中的日常使用；一致、清晰且适配比例的图标会建立信任，让 PWA 感觉是精心设计的。

下一步

• 回顾现有图标栈：多张 PNG/ICO 是否可以用单个 SVG 替换。
• 导出或转换品牌图标为正方形 SVG。
• 在 Safari 26 beta 测试 SVG，尤其主屏幕与 Dock 场景。
• 更新 manifest 以引用 SVG 图标，同时为旧浏览器保留位图兜底。
• 在图标资产指南中新增 SVG 指引，维持后续一致性。