Favicon 格式详解：ICO、PNG、SVG 以及浏览器需要什么

为什么 favicon 依然出奇地复杂

favicon 看起来只是一张小图片，但它位于浏览器界面、书签、标签页、固定快捷方式、搜索结果、移动端主屏幕以及渐进式 Web 应用安装等多个场景的交汇处。每个场景的期望都略有不同。

这就是为什么 favicon 建议常常显得混乱。有些团队只提供一个 favicon.ico，因为过去这样就够了。另一些团队会生成十几个文件，却并不知道哪些文件真的会被使用。更合理的折中方案要小得多：理解 ICO、PNG 和 SVG 各自擅长什么，然后提供一组紧凑的文件，覆盖当前浏览器和常见设备场景。

favicon 不是展示图像流水线能力的地方。它需要的是保守、明确和兼容。

ICO：拒绝消失的老格式

ICO 是经典的 Windows 图标容器。它可以包含多张不同尺寸的位图，常见尺寸包括 16×16、32×32 和 48×48 像素。这一点很重要，因为 favicon 可能会在浏览器标签页中以很小的尺寸渲染，在书签列表中稍大一些，在 Windows 快捷方式中又会以另一种方式显示。

关键细节在于，ICO 是一个容器，而不只是一张图片。一个好的 favicon.ico 通常包含多个栅格尺寸，这样浏览器或操作系统就可以选择最接近的版本，而不是缩放一张很小的位图。

ICO 仍然有用，主要有三个原因：

• 浏览器可能会自动请求 /favicon.ico，即使你没有在 HTML 中链接它。
• 一些较旧的浏览器和集成仍然期望它存在。
• 当较新的图标声明被忽略时，它是一个安全的回退方案。

这并不意味着 ICO 应该是你唯一的图标。它编辑起来不方便，对现代工作流也不算友好，并且不适合作为品牌标识的事实来源。把它当作兼容性回退即可。

实际使用中，请在站点根目录放置一个真正的 /favicon.ico。除非你喜欢嘈杂的日志和不必要的浏览器重试，否则不要在那里返回 404。

PNG：可靠的主力格式

PNG 仍然是 favicon 和触摸图标中最可预测的栅格格式。它支持透明度，支持范围广，并且在不同浏览器和平台上的表现一致。

对于 favicon，当你需要明确像素尺寸的图标，例如 32×32 或 48×48 时，PNG 很有用。对于移动端主屏幕图标，在某些环境中 PNG 实际上是必需的。例如，Apple touch icon 在正常生产使用中就是基于 PNG 的。

几条实用规则会有帮助：

• 从矢量源导出，而不是从一张已经很小的位图导出。
• 先确保图标在 16×16 下清晰可辨，再考虑更大的尺寸。
• 留出足够的内边距，避免标识在圆角或遮罩场景中显得被裁切。
• 避免使用细小文字、细线和复杂插画。

对于 favicon，通常不值得过度纠结 PNG 压缩，因为文件本来就很小。不过，也不要因为它是从设计工具直接导出的，就发布一个 500 KB 的触摸图标。如果你已经在审视更广泛的图像选择，那么来自现代 Web 中的图像格式决策的同样严谨思路也适用于这里：根据任务选择格式，而不是因为某种格式正流行。

SVG：现代、灵活的选择

SVG favicon 很有吸引力，因为它不依赖分辨率。一个很小的文件就可以在多种尺寸下清晰渲染，并且可以直接在代码中编辑，或从设计软件中导出。

现代 Chromium、Firefox 和 Safari 版本都支持 SVG favicon。这使 SVG 成为许多网站很好的主 favicon 格式，尤其当图标是简单的 logo、字形或几何标识时。

但 SVG favicon 也有注意事项。

首先，SVG 应该是自包含的。不要依赖外部字体、远程图片或脚本。浏览器会对作为图片使用的 SVG 应用限制，而且即使某些内容在一个浏览器中可用，也可能在另一个浏览器中失败。

其次，保持视觉简单。SVG 并不会神奇地解决 16 像素问题。一张复杂的矢量插画被压缩到标签页里时，仍然会变成一团模糊。

第三，谨慎使用动态样式。有些团队会在 SVG favicon 内使用 prefers-color-scheme，让图标适应深色和浅色浏览器主题。这可以工作，但浏览器行为和缓存可能并不一致。如果品牌识别很重要，一个稳健的单一图标往往胜过一个巧妙的自适应图标。

SVG 是很好的源格式，也是很好的现代交付格式。但它不是跳过回退文件的理由。

浏览器实际会查找什么

浏览器主要通过两种方式发现 favicon：显式的 HTML 链接和隐式的根目录请求。

隐式行为是较旧的方式：如果浏览器需要图标但还没有找到，它可能会请求 /favicon.ico。这就是为什么即使在现代网站上，根目录下的 ICO 文件仍然有用。

显式行为使用文档 head 中的 <link> 元素。一个紧凑的现代配置如下：

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

manifest 随后可以指向用于可安装 Web 应用的更大 PNG 图标：

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

这不是唯一有效的配置，但它是一个很好的基线。它为现代浏览器提供 SVG，提供传统的 ICO 回退，覆盖 iOS 主屏幕保存场景，并支持应用安装上下文。

大多数网站应提供的 favicon 组合

对于普通的营销网站、文档网站、SaaS 应用或出版物，下面这组就足够了：

• /favicon.ico，包含 16×16 和 32×32，可选包含 48×48。
• /icon.svg，作为现代可缩放 favicon。
• /apple-touch-icon.png，尺寸为 180×180。
• 如果有 Web 应用 manifest，则提供 /icon-192.png 和 /icon-512.png。

如果某个平台有特定要求，你可以添加更多尺寸，但不要出于习惯生成十个文件。每多一个文件，就多一个需要缓存、可能被遗忘、可能命名错误，或在品牌更新后遗留过期的问题。

如果你的网站不可安装且没有 manifest，可能不需要 192 和 512 像素图标。如果你的网站表现得像一个应用，那么通常就需要。

常见失败模式

最常见的 favicon 问题并不是美术问题，而是交付问题。

其中之一是激进缓存。浏览器会非常顽固地保留 favicon。在测试期间，改过的图标可能要等到你强制刷新、清除站点数据、使用新文件名，或在全新配置文件中测试后才会出现。对于生产环境的品牌更新，在 HTML 中改成 /icon.svg?v=2 可能有帮助，但根目录的 /favicon.ico 更麻烦，因为浏览器会直接请求它。替换文件并等待缓存失效，往往也是工作的一部分。

另一个常见问题是 MIME 类型错误。SVG 应以 image/svg+xml 提供，PNG 应以 image/png 提供，ICO 通常使用 image/x-icon 或 image/vnd.microsoft.icon。许多浏览器比较宽容，但并非所有场景都如此。如果某个东西只在一个浏览器中失败，先检查网络响应，再重新绘制图标。与在生产环境中调试重定向和 HTTP 标头时使用的习惯一样：查看实际响应，而不是 CMS 声称正在提供什么。

第三个问题是设计密度。在网站页眉中表现漂亮的 logo，作为 favicon 时常常会失败。标签页图标是一项严苛测试。去掉文字、简化形状、提高对比度，并按真实尺寸测试。如果图标是页面内有意义的内容，那么替代文本等可访问性问题就很重要；对于 favicon 本身，它是浏览器界面装饰，而不是页面内容。关于这种区别，请参阅我们的图像替代文本实用指南。

<!-- tool-cta:start -->

💡 试试这个: 使用 Ultimate Favicon Generator 一次生成现代浏览器所期望的 ICO、PNG 和 SVG 变体。

<!-- tool-cta:end -->

简单的实施检查清单

发布前使用这份检查清单：

1. 从干净的矢量主文件开始。
2. 在 16×16 和 32×32 下测试标识。
3. 导出一个自包含的 SVG favicon。
4. 生成一个多尺寸 ICO 回退文件。
5. 导出一个 180×180 的 Apple touch icon。
6. 如果使用 manifest，添加 192×192 和 512×512 PNG。
7. 将 /favicon.ico 放在站点根目录。
8. 验证状态码、MIME 类型和缓存标头。
9. 至少在一个 Chromium 浏览器、Firefox 中测试；如果你的受众包含 Apple 设备，也要在 Safari 中测试。

favicon 很小，但也非常显眼。一个损坏的 favicon 会让网站显得未完成。一个制作良好的 favicon 会融入界面而不被注意，这正是它的意义所在。