SVG Favicon 生成器 - 以 SVG 作为主图标
多数 favicon 生成器丢给你一整个文件夹的 PNG，外加十几个为早已停产的 iOS 版本准备的 link 标签 - 却悄悄漏掉了在当代站点上最要紧的那一个文件。结果就是一个既臃肿又不完整的图标包。你手上最好的 favicon 就是你的 SVG：一个矢量文件覆盖了现在以及将来的每一种屏幕密度，而且通常比人们用来取代它的那张 32 像素 PNG 还小。所以这个包会把它作为 favicon.svg 一并提供，并让标记优先指向它，下面再以 ICO 作为后备。那些确实需要 PNG 的地方，PNG 也都还在，而且每一张都按各自尺寸从你的矢量绘制，而不是从一次大渲染缩小得来。一切都在你的浏览器里生成，不上传任何东西。
如何使用此工具
放入你的 SVG
把你的徽标或标记拖到上方方框里，最大 5 MB。正方形图稿效果最好 - 其他比例会被放进一个正方形框内，空出来的部分保持透明。
检查小尺寸
预览会按实际大小显示 16、32 和 48 像素，走的是图标包所用的同一条渲染路径。如果标记在这里 16 像素下就已经看不清，那就是访客在标签页里将会看到的样子。
填写站点名称
你填的内容会作为 name 和 short name 写进 site.webmanifest，也就是有人把你的站点装到主屏幕时 Android 和桌面版 Chrome 会显示的名字。留空的话，manifest 里会放一个中性的占位符供你日后修改。
生成并下载图标包
点击「生成 favicon 图标包」。你的图形会在 16、32、48、180、192 和 512 像素下渲染，其中三个进入 favicon.ico，然后连同一份 manifest 和一份 README 一起打包。
复制那四个标签
把所有文件解压到站点的根目录，再把下载按钮旁边显示的四个 link 标签复制进你的 <head>。整个安装就到此为止 - 没有构建步骤，也没有额外配置。
常见问题
ZIP 里到底有什么？
七个文件：你的原始图稿 favicon.svg，包含 16、32 和 48 像素版本的 favicon.ico，180 像素的 apple-touch-icon.png，供 Android 和可安装应用使用的 icon-192.png 与 icon-512.png，site.webmanifest，以及一份重复列出那些标签的 README。代码片段引用到的每个文件都在压缩包里。
为什么 SVG 列在 ICO 前面？
因为它是更好的图标，而浏览器会选用它能理解的最后一种格式。一个矢量文件在现有和将来的每一种显示密度下都保持锐利，不需要任何尺寸变体，而且往往比一张 32 像素 PNG 还小。用不了它的浏览器会自然落到下一行的 ICO 上。
真的只需要四个标签吗？
在今天新建的任何站点上，是的。生成器至今还在产出的那一长串 apple-touch-icon-precomposed 变体，针对的是 iOS 6 及更早版本。当代 iOS 只读一个 apple-touch-icon，Android 读 manifest，其余一切读那些 icon 链接。四个标签全都覆盖到了。
我的 favicon 能随深色模式变化吗？
只有 SVG 可以，这也是它排在最前面的另一个理由。在 SVG 文件内部放一条媒体查询 - 针对某个 fill 的 prefers-color-scheme 规则 - 浏览器会在标签页里实时应用它。ICO 和那些 PNG 是固定图像，渲染时是什么颜色就一直是什么颜色。
为什么小尺寸要单独渲染？
因为把一次大渲染缩小，扔掉的恰恰是小图标赖以成立的细节。在一个像素风标记上以 16 × 16 实测：从矢量绘制得到 141 个实心像素、零个半透明像素；而同一图稿从 512 缩小后得到 98 个实心和 64 个模糊像素。也就是四成的墨色变成了糊状。
这些文件该放在服务器的什么位置？
全部放在站点根目录，与 index.html 并列，这样它们才能解析到 /favicon.svg、/favicon.ico 等地址。代码片段里的路径以斜杠开头正是这个原因。如果你的框架从 public 或 static 目录提供静态文件，就放到那里，URL 保持不变。
我上传了新的，但 favicon 没有变。
浏览器对 favicon 的缓存比几乎任何东西都顽固，常常连普通刷新都不理会。直接打开图标的 URL 再重新加载，或者用一个隐私窗口来检查。这几乎总是缓存问题而不是文件坏了，所以在改动其他任何东西之前，先确认那个 URL 能正常加载。
我的源 SVG 该做多大？
由于一切都从几何图形重新绘制，viewBox 的尺寸几乎无关紧要 - 但正方形的比例很重要。先把标记设计成在 16 像素下能读懂，再往上放大。一个在名片上好看的徽标，通常细节多得根本无法在浏览器标签页里存活。
我还需要那个 ICO 吗？
留着吧。它只有几 KB，却覆盖了没人会去测试的那些地方：Windows 桌面快捷方式、RSS 和播客阅读器、老旧聊天客户端里的链接预览，以及桌面应用内嵌的浏览器。其中大多数按惯例仍会请求 /favicon.ico，并且无视你标记里声明了什么。
生成这个图标包会上传任何东西吗？
不会。所有渲染、ICO 打包和 ZIP 压缩全都在你的浏览器里完成。你的徽标不会到达任何服务器，这也意味着图标包在你点击的那一刻就已就绪，而不是排完队才有，而且你的图稿不会在任何地方留下副本。
您可能还需要
有问题吗？ 报告问题