你有一个 logo、一张截图或一个 SVG 图标。把它丢进在线 favicon 转换器，得到一个装满图标的 ZIP 包。部署上线后，浏览器标签页却依然显示一个空白方块。转换本身没问题，问题出在实现环节。
这篇文章会讲清楚转换器实际做了什么、如何在不破坏图标体系的前提下使用它，以及常见的坑都藏在哪儿。
在线 favicon 转换器到底生成什么
好的转换器不只是缩放图片。它接收一张源图，输出一组文件，对应浏览器和操作系统所期望的各个图标位置。
典型输出包括：
- favicon.ico —— 一个多分辨率容器，通常是 16×16、32×32 和 48×48。WHATWG HTML 规范在 html.spec.whatwg.org 中定义了
rel='icon'链接类型，而旧版浏览器仍会按惯例请求/favicon.ico。 - PNG 变体 —— 16×16、32×32、96×96、180×180、192×192、512×512。每个尺寸对应不同的使用场景：标签栏、书签栏、iOS 主屏幕、Android 主屏幕。
- Apple Touch Icon —— 一张 180×180 的 PNG，背景不透明。iOS 会把它合成到圆角方块上，所以透明区域会变成黑色或白色。
- site.webmanifest —— JSON 文件，指引 Android 和 PWA 安装使用正确的 PNG。
- HTML 片段 —— 你粘贴到
<head>里的<link>标签。
如果转换器只给你一个 ICO 文件，那它没干完活。剩下的你得手动补。
上手：选对源文件
源图比转换器本身更重要。一张 200×200 的白底 JPG 只会生成模糊、带白框的图标。一张 1024×1024 的透明背景 PNG 才能让转换器干净地降采样。
矢量源方面，如果转换器支持，SVG 是最佳输入。SVG 可以缩放到任意输出尺寸而不产生插值伪影。如果你只有位图 logo，上传前先导出最大且最清晰的版本。
源图的三条规则：
- 正方形画布。 把 logo 填充到 1:1 比例。非正方形的输入会被拉伸或加黑边。
- 透明背景。 除非你特意想要一个实色方块，否则去掉背景。如果你手头只有一张平面 JPG，可以参考如何制作透明背景 favicon。
- 简洁的图形。 完整的文字商标在 16×16 下无法辨认。先提取符号或字母组合。
源图干净了，转换这一步就简单了。
关键功能要点
不是每个在线转换器都一样。差别在你下载 ZIP 之后才会显现。
多尺寸 ICO 输出
ICO 格式是一个容器，不是单张图片。合格的转换器会把 16、32、48 像素的帧打包进一个文件，这样 Windows 任务栏、浏览器标签页和书签栏各自选取合适的分辨率。单帧 ICO 会迫使浏览器降采样，边缘就会发虚。
Manifest 和 HTML 生成
转换器应该输出可直接粘贴的 <head> 块和 site.webmanifest。手写这些是大多数开发者引入拼写错误的地方。rel='icon' 的规范本身很短，但周边的标签（Apple Touch、maskable、theme-color）很容易写错。
深色模式感知
有些转换器现在会生成带 prefers-color-scheme 媒体查询的 SVG，浏览器处于深色模式时图标会自动反色。这是可选项，但如果你的图标是深色配浅色背景，就很有用。没有它，黑色图标会在深色标签栏里消失。
敏感 logo 不走服务器
如果你要转换的是未发布的品牌标识，先确认工具是在客户端处理图片还是上传到服务器。客户端转换能把源文件留在你自己的机器上。
打造干净图标体系的实用技巧
转换器把文件交给你之后，几个小习惯就能避免大部分 favicon 问题。
- 把 ICO 放在站点根目录。 即使你声明了其他图标，浏览器仍会请求
/favicon.ico。那里返回 404 只会给控制台添乱。 - 有意识地排列 link 标签顺序。 浏览器有时选最后一个匹配的图标，有时选第一个。把 SVG 放最前，然后是 PNG 回退，最后是 ICO。具体的堆叠规则见favicon link 标签顺序。
- 更新时做缓存刷新。 更换图标文件时，在图标 URL 后附加版本查询字符串。浏览器对 favicon 的缓存非常激进。
- 在真实标签页里测试，别只看预览。 转换器预览显示的是图片本身，不是浏览器渲染的结果。用 Chrome、Firefox 和 Safari 打开已部署的页面。
- 检查 manifest 路径。 用相对路径引用的
site.webmanifest在页面从子目录提供服务时会失效。
下面是转换器应该生成的最小 <head> 块，已按带版本号的文件名做了调整：
<link rel='icon' type='image/svg+xml' href='/favicon.svg?v=3'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png?v=3'>
<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16.png?v=3'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png?v=3'>
<link rel='manifest' href='/site.webmanifest'>如果你的转换器输出的东西和这个差不多，那就没问题。如果只输出一行，你就得自己补齐。
什么时候不该用转换器
在线转换器适合一次性的图标集。但如果你需要每次部署都自动重新生成图标，或者源文件是频繁变动的实时设计 token，它就不合适了。
这些情况下，用构建步骤工具或在本地运行同样转换的脚本更可靠。输出结果完全一样，区别在于可复现性。
不过对于一次性项目，在线 favicon 转换器省掉了繁琐的部分——缩放、打包 ICO 容器、编写 manifest——留下真正需要人来做的事：选一个在 16 像素下依然清晰可辨的标识。