指南

网站图标 (.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. 1

    设计或导出 SVG

    方形 viewBox,单根 <svg> 元素。

  2. 2

    生成 .ico 后备

    使用 FetchFavicon 将 SVG 光栅化为多尺寸 .ico。

  3. 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。

相关工具

更多指南

指南

探索FetchFavicon

类别

转换器

公用事业

指南

教程