矢量图形

SVG Favicon 生成器

将你的 logo 转换为锐利清晰的 SVG favicon，自带深色模式变体，并为旧版浏览器自动生成回退文件。

上传 SVG 文件

将 SVG 文件拖入此处，或点击选择文件

现代 SVG Favicon 功能

无限缩放

SVG favicon 在任何尺寸和像素密度下都保持锐利清晰，永远不会因放大而模糊。

深色模式支持

同时生成浅色与深色变体，图标会随访客的系统主题自动切换。

更小的文件体积

一个精简的 SVG 往往比一整套 PNG 与 ICO 位图加起来还要小。

Safari Pinned Tab

导出单色蒙版 SVG，供 Safari 的固定标签页和 Touch Bar 使用。

旧浏览器回退

随包附带的 ICO 与 PNG 回退文件，确保在不支持 SVG 的浏览器中也能正常显示。

CSS 主题切换

内置 prefers-color-scheme 媒体查询，无需任何 JavaScript 即可在 SVG 内部切换颜色。

如何制作 SVG Favicon

从一个 SVG logo 出发，一分钟内生成完整的、随主题自适应的 favicon 套件。

1. 上传 SVG

拖入你的矢量 logo（SVG 文件）。所有解析都在浏览器本地完成，不会上传到任何服务器。

2. 自定义颜色与尺寸

调整图标颜色、背景和显示尺寸，并分别设置浅色与深色变体，使其贴合你的品牌。

3. 预览浅色与深色

在默认、浅色和深色预览之间切换，确认图标在各种主题下都清晰可辨。

4. 下载并嵌入

下载完整套件——包含 SVG、ICO 与 PNG 回退文件——并将提供的 link 标签粘贴到 HTML head 中。

SVG 与传统位图 Favicon 对比

为什么矢量 favicon 比传统的 PNG 与 ICO 方案更出色。

能力	SVG Favicon	传统位图 Favicon
缩放清晰度	任意尺寸都清晰	需要多个固定尺寸
深色模式	通过 CSS 媒体查询自适应	需准备额外的图片文件
文件体积	单个小巧的矢量文件	多张位图体积累加
Retina / 高分屏	在任何屏幕上都锐利	需导出 2x/3x 版本
维护成本	只需修改一个源文件	每次改动都要重导所有尺寸
浏览器兼容	所有现代浏览器	全面兼容，包括旧版

我们会同时生成两者：供现代浏览器使用的 SVG，以及 ICO 和 PNG 回退文件，让每位访客都能看到你的图标。

SVG Favicon HTML 配置

需要放入页面 head 的具体 link 标签。

将下列标签放入 HTML 文档的 head 部分，并按此顺序排列，让现代浏览器优先选用 SVG，旧版浏览器则平稳回退。

资源	Link 标签	用途
favicon.svg	`<link rel="icon" href="/favicon.svg" type="image/svg+xml">`	面向现代浏览器的主矢量 favicon
favicon.ico	`<link rel="icon" href="/favicon.ico" sizes="any">`	不支持 SVG 的浏览器回退
icon-192.png	`<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">`	PNG 回退及 PWA manifest 图标
apple-touch-icon.png	`<link rel="apple-touch-icon" href="/apple-touch-icon.png">`	iOS 与 iPadOS 主屏幕图标
safari-pinned-tab.svg	`<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">`	Safari 固定标签页的单色蒙版

把 SVG 图标放在最前面，让支持的浏览器优先使用；ICO 那一行则确保旧版浏览器也有兜底。

何时使用 SVG Favicon

矢量 favicon 在哪些场景下收益最大。

现代 Web 应用

如果你的用户使用最新浏览器，一个 SVG favicon 只需单个轻量文件即可处处保持清晰。

品牌一致性

用一个矢量源文件作为唯一基准，让图标在标签页、书签和主屏幕上保持完全一致。

深色模式站点

支持主题的 SVG 会自动切换颜色，图标永远不会在深色浏览器界面上消失。

高分屏设备

在 Retina 和 4K 屏幕上，矢量 favicon 无需导出 2x 或 3x 位图即可像素级清晰呈现。

常见问题

关于 SVG favicon 以及如何上线的所有要点。

为什么要用 SVG 制作 favicon？

SVG favicon 是单个矢量文件，在任何尺寸和像素密度下都保持清晰，可通过 CSS 支持深色模式，体积通常还比一整套 PNG 与 ICO 位图更小——因此更锐利，也更易维护。

所有浏览器都支持 SVG favicon 吗？

Chrome、Edge、Firefox 和 Safari 的当前版本都支持 SVG favicon。旧版浏览器会忽略它，因此我们同时生成 ICO 与 PNG 回退文件，确保图标在任何环境都能显示。

如何实现深色模式的 SVG favicon？

在 SVG 内部嵌入 prefers-color-scheme 媒体查询，并为每种主题定义颜色。本工具会自动添加这段逻辑，访客在浅色与深色模式间切换时，favicon 会自动重新着色，且无需任何 JavaScript。

SVG favicon 安全吗？需要做 sanitize 处理吗？

SVG 中可能包含脚本，因此请只使用来源可信的文件。本工具在本地解析你的 SVG，输出不含外部引用和脚本的干净静态标记，使结果可以安全上线。

我还需要 ICO 回退吗？

需要——为了覆盖最广的用户。现代浏览器会优先使用 SVG，但 favicon.ico（以及 PNG）能保证旧版浏览器和只识别位图格式的工具仍能显示图标。我们的下载包两者都已包含。

如何在 Next.js 或其他框架中使用 SVG favicon？

将 favicon.svg（连同 ICO 和 PNG 回退文件）放入 public 或 static 目录，并用提供的 link 标签引用它们。在 Next.js 中，你也可以通过 metadata 的 icons 字段或直接在根 layout 的 head 中添加这些标签。