网站图标 (.ico) 与 SVG
SVG 是现代最令人兴奋的图标格式——矢量、深色模式感知且小巧。但它无法在 2026 年完全取代 .ico。原因如下,以及如何使用两者。
SVG 可以无限扩展,并支持文件本身内部的暗模式媒体查询。 1 KB SVG 涵盖了每个现代浏览器上的每个密度。
ICO 是通用后备。较旧的 Safari 版本、旧版浏览器和裸 URL <code>/favicon.ico</code> 约定仍然依赖于它。
推荐设置:提供 <code>favicon.ico</code> + <code>favicon.svg</code>。支持SVG的浏览器会更喜欢它;其余的会自动回退到 .ico。
工作原理
- 1
设计或导出 SVG
方形 viewBox,单根 <svg> 元素。
- 2
生成 .ico 后备
使用 FetchFavicon 将 SVG 光栅化为多尺寸 .ico。
- 3
链接两者
<link rel="icon" href="/favicon.ico"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg">。
立即尝试
生成 .ico + SVG 对
SVG 转 PNG 转换器常见问题
如果我使用 SVG,我可以完全删除 .ico 吗?+
不安全。许多社交嵌入器、RSS 阅读器和遗留工具仍然按照惯例请求 /favicon.ico。
哪些浏览器支持 SVG 图标?+
Chrome 80+、Edge 80+、Firefox 41+、Safari 15+ 和勇敢。 iOS Safari 仍然更喜欢 apple-touch-icon PNG。
SVG 网站图标可以有多小?+
干净的单色标记小于 1 KB。即使是复杂的多色徽标也很少超过 4 KB。