网站图标 (.ico) 与 SVG

SVG 是一种矢量格式，这意味着单个 SVG 图标可以以任何像素密度渲染而不会降低质量。在 1x 显示屏上，它以 16×16 像素渲染；在 3x Retina 显示屏上，它以来自同一文件的 48×48 物理像素进行渲染。没有具有 4 个特定尺寸光栅帧的 ICO 捆绑包可以与这种自动密度处理相匹配。 SVG 是现代高 DPI 显示器的理想格式。

.ico 格式仍然是通用基准。自 20 世纪 90 年代末以来，每个桌面浏览器、移动浏览器、操作系统和处理 Web 图标的第三方工具都支持 favicon.ico。许多这样的环境根本不检查 HTML 链接标签 - 它们只是尝试从域根获取 /favicon.ico 作为约定。从您的设置中删除 .ico 会立即破坏有意义的用户和工具部分的图标。

深色模式支持是 SVG 图标的杀手级功能。 SVG 文件可以嵌入带有 `@media (prefers-color-scheme: dark)` 查询的 `<style>` 块。当浏览器处于深色模式时，查询将激活并可以更改图标的填充、描边或背景颜色。对于 .ico 或 PNG 来说这是不可能的——这些格式是静态栅格，没有环境意识。

浏览器对 SVG 图标的支持已经显着成熟。 Chrome 80+（2020 年发布）、Edge 80+、Firefox 41+ 和 Safari 15+（2021 年发布）均支持 `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`。截至 2026 年，绝大多数活动浏览器安装都支持 SVG 图标。值得注意的例外是较旧的 iOS 设备上的较旧的 Safari（15 之前） - 这些设备会自动回退到 .ico。

文件大小是 SVG 的另一个优势。用于简单标记的干净单色 SVG 网站图标通常小于 1 KB。以良好质量捆绑 16、32、48 和 64 像素光栅帧的 .ico 文件通常为 10-25 KB。对于加载时间要求非常快的网站，发送 SVG 图标而不是独立的 PNG 集可以显着减少图标负载 - 尽管任一格式都会在第一次加载后缓存。

SVG 网站图标链接语法与 .ico 略有不同。您需要一个显式类型属性：`<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`。如果没有 type 属性，某些浏览器将无法将该文件识别为网站图标。首先将其与 .ico 后备链接标记配对：`<link rel='icon' href='/favicon.ico'>`。了解 SVG 图标的浏览器更喜欢更具体的 SVG 标签；其他人则进入 .ico。

在部署网站图标之前，SVG 优化是值得做的。设计工具导出 SVG 以及编辑器元数据、注释、不可见路径和冗余属性，这些属性会在没有任何视觉贡献的情况下添加字节。通过 SVG optimizer 运行 SVG 可以将文件大小减少 50-80%，同时保持图标视觉上相同。较小的 SVG 解析速度也更快，这对于较慢的连接很重要。

.ico 格式可处理 Windows 操作系统集成，而 SVG 则无法处理。从浏览器选项卡、任务栏图钉和 Windows 文件资源管理器图标创建的桌面快捷方式都读取 /favicon.ico。在这些上下文中，SVG 不是可识别的 Windows 图标格式。即使主要在浏览器选项卡中看到 SVG 图标的用户在为您的网站创建 Windows 快捷方式时也会看到 .ico 版本。

可以使用 SVG 使用 `<animate>` 元素或 SVG 文件中的 SMIL 动画来对图标进行动画处理。动画 SVG 图标可以脉冲、旋转或改变颜色。浏览器对图标中的 SVG 动画的支持是有限的（Chrome 和 Edge 支持；Firefox 和 Safari 不支持），但对于想要通过图标显示状态更改（例如，加载指示器、新通知点）的 Web 应用程序来说，这是一个创意选项。

SVG 图标支持简单的暗/亮切换之外的高级颜色模式。您可以在 SVG 内使用 CSS 自定义属性，响应高对比度模式的 `forced-colors` 媒体查询，并使用多个颜色方案断点。这种级别的主题对于光栅格式来说是不可能的，这使得 SVG 成为以可访问性为中心的设计系统的最佳选择。

SVG 在生产中的实际限制是您仍然需要非 SVG 后备。最简单的方法是保留 SVG 作为主图标，并从同一 SVG 源生成 .ico 和 apple-touch-icon PNG。 favicon generator 接受 SVG 作为源格式，并从矢量数据生成 .ico 和 PNG 输出 - 光栅化不会造成质量损失。

对于社交媒体共享卡、OG 图像和链接展开，favicon 源格式是无关紧要的 - 社交平台从 HTML 或 /favicon.ico 获取 favicon 并在内部进行转换。无论您的网站图标是 .ico、PNG 还是 SVG，展开的链接卡都会显示该图标。关注图标内容的质量，而不是社交共享场景的格式。

实现推荐的 ico+SVG 设置仅涉及三个链接标签：`.ico` 回退、`image/svg+xml` SVG 和 `apple-touch-icon` PNG。浏览器按照具体的顺序读取它们——首先是最具体的格式——并选择他们支持的第一个格式。这种渐进式增强方法意味着每个用户都可以获得其浏览器可以处理的最佳图标。请参阅 best favicon format guide 了解完整的决策矩阵。