SVG 与 ICO 图标
SVG是现代浏览器中最精确、最小的选项； ICO是大家还需要的兼容地板。了解双方何时获胜、如何组合它们、查看示例并修复导致 favicon 向量消失的暗模式错误。
两种业态，不同职业
SVG favicon 是单个 XML 文档，适合任何制表符大小，无需额外字节。 ICO 文件是包含一个或多个预光栅化图像的二进制容器。使用我们的[favicon生成器]（工具：favicon-generator）、[PNG到ICO转换器]（工具：png-to-ico）、[SVG到ICO转换器]（工具：svg-to-ico）和[实时favicon测试器]（实用程序： favicon-test）来创建和验证您的图标集，并阅读[配套指南]（指南：favicon-vs-svg）以获取浓缩演练。
现代 Chromium、Firefox 和 Safari 可以将 SVG 显示为选项卡。 Windows shell、旧集成和隐式 /favicon.ico 获取始终需要 ICO 栅格数据。
问题不是 SVG 或 ICO - 而是 SVG 加 ICO，其中 SVG 列出用于兼容浏览器，ICO 作为安全网。
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
为什么SVG在现代浏览器上获胜
一个文件涵盖 16 × 16 到 256 × 256 逻辑像素。没有定义要维护的 mipmap。
对于简单品牌来说，文件大小通常小于 2 KB，比六张图片的 .ico 小得多。
内置 CSS 可以反转 @media 下的填充（首选颜色方案：深色），为您提供自适应选项卡，而无需导出单独的夜间资源。
SVG 是文本。您可以像区分任何其他源资产一样区分 Git 中的 favicon 更改。
为什么ICO仍然重要
即使您在 HTML 中省略了 /favicon.ico，浏览器也会要求输入 /favicon.ico。此查询应返回有效的图标容器，而不是重命名为 .ico 的 SVG。
Windows pin、Outlook 链接部署和一些 RSS 阅读器完全忽略SVG。预计大约 5% 的展示次数使用仅限 ICO 的路径。
ICO 还为您提供可预测的像素。复杂的SVG过滤器可能在不同引擎中显示不同；光栅替代品稳定了外观。
两者一起使用
首先声明 ICO 以获得最大兼容性，然后声明 SVG 进行改进：
<link rel="icon" href="/favicon.ico"size="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
当类型和 MIME 正确时，兼容的浏览器更喜欢 SVG。其他的则回退到 ICO 且没有损坏的图像字形。
将其与 180×180 Apple-Touch 图标 PNG 配对，因为 iOS 不使用 SVG 作为主屏幕图标。
示例
单色字母：SVG，带有单个 <path> 和深色模式填充交换。 ICO 从 Windows 快捷方式的相同表单生成。
渐变徽标：简化为 SVG（仅平面填充）。将营销梯度保留在网站上，而不是在 16x16 选项卡中。
有遗留IE要求的政府或企业站点：优先考虑ICO；仅在分析显示 IE 流量可以忽略不计后才添加 SVG。
设计具有严格品牌颜色的系统：将SVG存储在存储库中，运行CI任务在每个版本标签上重新生成.ico。
常见问题
我可以只使用SVG吗？如果您关心 Windows 快捷方式和隐式 .ico 获取，则不然。
Safari 支持 SVG favicon 吗？桌面版 Safari 15+ 可以执行此操作。 iOS 主屏幕始终需要 PNG。
SVG 会减慢第一次绘制的速度吗？与英雄图像相比，1-2 KB 的 SVG 可以忽略不计。
我可以在 SVG 中嵌入位图吗？你可以，但你会失去可扩展性 - 使用 ICO 代替。
故障排除
SVG favicon 在深色模式下不可见：内边距对应于选项卡的背景。添加显式填充或首选颜色方案规则。
Chrome 使用 ICO，而不是 SVG：检查 type="image/svg+xml" 并验证服务器内容类型是否为 image/svg+xml。
SVG 显得不规则：您已经光栅化了复杂的滤镜。简化路径或依赖 ICO 作为选项卡。
文件SVG巨大：以SVGO导出；删除 Illustrator 元数据和未使用的定义。
性能和缓存说明
与英雄图像相比，SVG 的解析成本很小，但 Illustrator 巨大的 SVG 导出 (100KB+) 仍然在每个选项卡上浪费字节。
浏览器缓存favicon与控制HTML上的HTTP缓存分开。将 favicon.svg 重命名为 favicon-v2.svg 在营销需要时强制刷新。
缓存 HTML 的服务工作人员不应永远缓存具有过时重新验证的图标响应 - 重命名时更改缓存键。
HTTP/2复用意味着三个小图标文件不会出现级联问题。发布正确的格式；不要将 SVG 和 ICO 合并到一个文件中。
可达性和对比度
favicon 在选项卡中具有装饰性 - 它们不需要 HTML 中的替代文本。重要的站点名称始终属于<title>。
低对比度 SVG 标记 UI chrome 的 WCAG 失败，就像它们在页面内容上失败一样。测试 #fff 和 #323232 背景的对比度。
纯颜色标记会让色觉缺陷的用户感到困惑。在 16x16 的轮廓中添加独特的形状，而不仅仅是色调的变化。
双格式图标的 CI/CD
将 favicon.svg 存储在 Git 中。在发布标签上，运行无头脚本或手动生成器步骤来生成 favicon.ico 并提交二进制文件或附加它们以部署工件。
如果 favicon.ico 早于 favicon.svg mtime，则 CI 失败 — 检测徽标修改后忘记的重新生成。
预览环境应使用与生产环境相同的图标路径来在合并之前捕获 404。
品牌系统文档
样式指南中的文档：SVG是源，ICO是生成的工件，尺寸PNG是导出目标。
指定 16×16 的最小笔划粗细和填充，以便外部机构不会运送非品牌产品。
在品牌 PDF 中包含浅色和深色屏幕截图。营销团队引用选项卡的频率与引用标题的频率一样。
当图标随着功能启动而改变时，带有与产品版本相对应的 Semver 标签的版本 favicon 资产。
进行季度审核：如果分析显示您的受众对 SVG 的支持率超过 98%，请始终保留 ICO – 长尾对于企业安装至关重要。
SVG + ICO 的部署清单
首先部署favicon.ico并验证隐式查询/favicon.ico返回200。
暂存时使用正确的 MIME 添加 favicon.svg；运行自动检查 Content-Type 是否为 image/svg+xml。
发布到生产环境，清除 CDN，刷新三个浏览器，确认 Chromium 上的选项卡 SVG 并在预期位置回退 ICO。
监控一周的支持票证：如果 QA 忽略了 Windows 快捷方式，则在品牌重塑后立即会出现图标问题。
将基本屏幕截图保存在发布票据中，以便在查看代码时可以清楚地看到未来的回归。