每种格式的用途
favicon 并不是一个文件。浏览器、操作系统和书签工具各自寻找不同的文件；HTML 标准允许页面声明多个图标，并把选择权交给浏览器。
| 文件 | 格式 | 用途 |
|---|---|---|
favicon.ico |
ICO，一个文件中包含多张位图 | 兜底方案：页面没有任何图标链接时，浏览器可能会请求网站根目录下的 /favicon.ico。这个文件包中的 ICO 包含 16、32 和 48 px 三种尺寸。 |
favicon.svg |
SVG | 一个可缩放的文件，供支持 SVG favicon 的浏览器使用。它可以自带浅色和深色两套颜色。 |
favicon-16x16.png、favicon-32x32.png |
PNG | 标签页图标的位图版本，供要求 PNG favicon 的建站工具或其他工具使用。 |
apple-touch-icon.png |
PNG，180 × 180 px | 有人把网站添加到 iPhone 和 iPad 主屏幕时使用。 |
site.webmanifest |
JSON | 可安装网页应用的名称、颜色和应用图标（见 PWA maskable 图标：安全区域与设置）。 |
ICO 是最古老的格式，至今仍是读取范围最广的格式。HTML 标准把请求 /favicon.ico 描述为页面未声明图标时浏览器可能会做的事，所以请把它当作安全网，同时仍然显式地链接它。MDN 指出，一个 ICO 文件可以存储多个尺寸，所以一个文件就能覆盖 16、32 和 48 px。
SVG 是唯一一种在任何尺寸、任何像素密度下都保持清晰的格式。SVG 中的 <style> 块可以通过 prefers-color-scheme 切换颜色，让深色标志在深色标签栏上依然可见。服务器必须以 image/svg+xml 类型发送它：Can I use 指出，Chromium 系浏览器和 Firefox 都要求这个类型。
PNG favicon 是普通位图，通常带 sizes 属性链接。标准称 sizes 只是建议性的：浏览器可以用它来挑选最接近的文件，但并没有义务这样做。这一点有利有弊，下一节会说明。
哪些浏览器使用哪种格式
根据 Can I use 的数据（2026 年 9 月 28 日查阅），SVG favicon 的支持情况是：Chrome 和 Edge 从 80 版起，Firefox 从 41 版起，Opera 从 67 版起，Safari 从 26.0 版起，macOS 和 iOS 均如此。Safari 18 及更早的版本不使用 SVG favicon，而是依赖 PNG 和 ICO 文件。WebKit 团队在 2025 年 9 月的 Safari 26.0 发布文章中宣布了这一变化。仍在使用旧版 Safari 的用户看到的依然是位图图标，所以 SVG favicon 永远不能取代它们。
当页面声明了多个图标时，HTML 标准规定浏览器选择最适合自己的那个；如果有几个同样合适，则最后声明的那个胜出。如果某个文件无法使用（例如浏览器读不了它的格式），就换下一个。“最适合”由浏览器自行判断：按声明尺寸挑选的浏览器，可能会优先选择标注了 sizes="32x32" 的 PNG，而不是没有声明尺寸的 SVG，不管它们的顺序如何。所以下面的代码片段完全不链接指定尺寸的 PNG：位图尺寸由 ICO 覆盖，SVG 放在它之后。
有一个细节来自实践，而不是浏览器厂商。Evil Martians 的 favicon 文章建议在 ICO 链接上加 sizes="32x32"，以“修复 Chrome 优先选择 ICO 文件而不是 SVG 的 bug”；文章的更新日志说，他们在 2023 年 7 月因此替换掉了 sizes="any"。这篇文章没有链接任何 Chromium 的 bug 报告，我们也没有找到，所以请把它看作实战经验。生成器采纳了这条建议。这样做没有坏处，因为 ICO 中确实包含 32 px 的图像。
Apple touch 图标。 Apple 已归档的 Safari Web Content Guide 记载了 <link rel="apple-touch-icon">，并列出 Retina iPhone 使用 180 × 180 px。MDN 补充说，iOS 的主屏幕图标不使用普通的 rel="icon" 链接。Apple 的文档没有说明透明像素会怎样显示；Apple 开发者论坛上的一条回复（来自另一位开发者，而不是 Apple）说它们会显示为黑色。因此，生成器总是把这个文件做成不透明的，铺上你选择的背景色。
主题色是最不可靠的部分。Can I use 显示 Firefox 不支持 <meta name="theme-color">，并称桌面版 Chrome 只在已安装的网页应用中使用这个颜色。Can I use 和 MDN 都表示，从 Safari 26 起，它只对已安装的网页应用生效。对于 Android 上的 Chrome 和 iOS 26 上的 Safari，这两个来源在细节上说法不一。可以加上这个标签，但不要依赖它来做设计。
Apple 为 Safari 固定标签页设计的旧版 mask-icon 链接仍出现在其归档文档中。我们没有找到任何官方说明表示它已被弃用，也没有任何地方要求必须使用它。这个文件包中没有包含它。
值得提供的最小文件组合
如果网站有矢量图稿，请链接 favicon.ico、favicon.svg 和 apple-touch-icon.png；如果网站需要可安装，再加一个包含 192 和 512 px 图标的 manifest。Evil Martians 的文章最终推荐的也是这一组。PNG favicon 可以放在服务器上，供需要它的工具使用，不必写链接标签。如果网站的标志只有位图版本，就不要用 SVG：把 PNG 包在 SVG 文件里仍然是位图，毫无益处。如果想要 SVG favicon，请先把它描摹成真正的矢量路径。
HTML 代码片段
下面是生成器为下方示例包写入 favicon.html 的标签，文件放在网站根目录：
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
如果你的文件放在 /assets/icons/ 之类的文件夹中，请在 Favicon 和 PWA 图标生成器 中把该文件夹设为路径前缀，所有 href 都会随之改变；另外请把 favicon.ico 也复制到网站根目录，因为在没有链接图标的页面上，浏览器会去那里找它。如果源文件是 PNG、JPG 或 WebP，生成的标签相同，只是没有 SVG 那一行。
可下载的真实示例
我们用本站自己的标志（一个已提交到代码库的 SVG，不是任何人上传的文件）运行了 favicon 生成器，名称设为“png2svg.art”，主题色 #0a2d8f，背景色 #e8efff，内边距 8%。之后没有做任何编辑：这些正是工具生成的文件。
32 px favicon，实际尺寸：
180 px Apple touch 图标，铺在背景色上，不透明：
下载完整示例包（ZIP）：包含 favicon.svg、favicon.ico、两个 PNG favicon、Apple touch 图标、四个应用图标、site.webmanifest、favicon.html 和一份 README。
检查你的 favicon
上传后请在无痕窗口中打开页面：浏览器会长时间缓存 favicon，普通窗口里显示旧图标说明不了任何问题。在开发者工具的网络面板中，确认 favicon.svg 以 image/svg+xml 类型提供，并且每个文件都返回 200。在浅色和深色模式下分别看看标签页，再把页面添加到手机主屏幕，检查 touch 图标。