你的 favicon 应该是 SVG、PNG 还是 ICO?简短回答:为了面向未来的配置,三种都用。但每种格式都有明确的角色。以下是它们的对比。
快速对比
| 格式 | 可缩放 | 浏览器支持 | 深色模式 | 最适用于 |
|---|---|---|---|---|
| ICO | 否(捆绑固定尺寸) | 通用(包括旧浏览器) | 否 | 必备的兜底 |
| PNG | 否 | 所有现代浏览器 | 手动(单独文件) | 特定尺寸(16、32、180、192、512) |
| SVG | 是(无限) | Baseline — 所有现代浏览器(Safari 26 于 2025 年 9 月补齐了差距) | 是(通过 CSS 媒体查询;Safari 有已知缺陷) | 现代浏览器、深色模式、清晰度 |
ICO — 通用兜底
.ico 是最古老的 favicon 格式,也是唯一保证在任何地方都可用的格式,包括 Internet Explorer 和旧的企业浏览器。单个 .ico 可以捆绑多种尺寸(通常为 16、32、48),浏览器会选择最合适的一个。
缺点:不可缩放、没有透明度技巧、文件比 SVG 大。但每个网站仍然应该提供一个。
PNG — 主力
PNG 是大多数现代浏览器为标签页图标实际加载的格式。你声明多个尺寸,浏览器为显示环境选择合适的一个:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />缺点:每个尺寸都是单独的文件,而且 PNG 无法适配深色模式。
SVG — 不再是未来,而是当下
SVG favicon 是矢量:在任何尺寸都保持完美清晰,体积更小,而且——最重要的是——通过内嵌 CSS 支持深色模式:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.logo { fill: #ffffff; }
}
.logo { fill: #000000; }
</style>
<rect class="logo" width="32" height="32" rx="6"/>
</svg><link rel="icon" type="image/svg+xml" href="/favicon.svg" />更新(2025 年 9 月):Safari 26 终于添加了 SVG favicon 支持,这使 SVG 成为所有现代浏览器(Chrome、Edge、Firefox 和 Safari)的 Baseline 特性。"Safari 不支持 SVG favicon"的旧建议如今已经过时。
仍需注意:Safari 目前会忽略 SVG favicon 内部的深色模式媒体查询(WebKit 缺陷 #309949),而且旧版 Android WebView 和受限制的企业浏览器仍然需要位图兜底——因此请在 SVG 旁边保留 PNG/ICO 链接。
那么应该使用哪一种?
推荐的 favicon 技术栈(按此顺序声明):
- SVG 放在最前——现代浏览器(自 Safari 26 起的全部)会优先选用它,并且它能启用深色模式。请参阅 SVG favicon 生成器。
- PNG,尺寸为 32、180(Apple)、192、512,覆盖各个平台。
- 一个
.ico作为通用的旧版兜底。 - 一个
site.webmanifest,为 PWA 关联所有图标。
一次上传即可获得所有这些文件,就在 Favicon.one——生成器会输出完整的多格式包以及可直接粘贴的 HTML。