SVG 转 ICO - 每个尺寸都从矢量绘制
ICO 不是一张图,而是一个装着好几张图的容器,浏览器会挑一张适合它当前绘制位置的。这个工具往里装六张:16、32、48、64、128 和 256 像素见方。从 SVG 出发之所以值得,是因为其中每一张都按各自的尺寸从你的原始几何图形绘制,而不是在 256 上渲染一次再缩小五遍。这个区别正是从矢量转换的全部理由,在硬边缘图稿上,它就是一枚可读图标与一团灰污渍之间的差别 - 我们实测过,数字就在本页上。一切都在你自己的设备上运行:浏览器读取文件,渲染六次,打包成 ICO 再交还给你。不上传,也不存储。
如何使用此工具
放入你的 SVG
把 SVG 拖到上方方框里或点击选择,最大 5 MB。文件按内容而非文件名检查,所以标错类型的东西会被拒绝,而不是渲染到一半。
看看 16 像素的预览
面板会按实际大小显示 16、32 和 48 像素的图稿,走的是与真实输出完全相同的渲染路径。如果 16 像素的版本在这里就已经看不清,它在浏览器标签页里同样看不清,而这一点没有任何转换器能替你解决。
生成 ICO
点击「生成 ICO」。你的图形会被单独渲染六次 - 16、32、48、64、128 和 256 像素 - 每次渲染都编码为 PNG,并按最大的条目在前的顺序打包进容器。
保存为 favicon.ico
下载文件并放到站点的根目录。浏览器、Windows 快捷方式和订阅阅读器按惯例都会请求 /favicon.ico,各自会挑容器里适合其显示位置的那个尺寸。
常见问题
文件里最终包含哪些尺寸?
六个:16、32、48、64、128 和 256 像素见方。16 用于浏览器标签页,32 用于任务栏和书签栏,48 用于 Windows 桌面,更大的三个覆盖高密度显示屏和 Windows 资源管理器里的大图标视图。每一个都是存放在容器内部的完整 PNG。
为什么每个尺寸单独渲染很重要?
因为缩小采样会把细节平均掉。我们用两种方式在 16 × 16 上渲染了一个像素风标记:直接从矢量绘制得到 141 个完全实心的像素,半透明像素为零。而从 512 像素的渲染结果缩小后,同样的 16 × 16 网格里有 98 个实心像素和 64 个部分透明的像素 - 四成的墨色变成了模糊。
它总是比缩小得来的版本更锐利吗?
不总是,而且值得知道分界在哪。当图稿的边缘正好落在像素网格上时收益最大:几何标记、像素画,以及任何使用 shape-rendering 的图形。而对于细描边的线性图标,两者几乎没有差别,因为 24 单位画布上的 2 单位描边,在 16 像素下无论哪种方式都不到一个半像素。
2026 年了我还需要 ICO 吗?
需要,但它是后备而不是主角。只要你声明了,所有现役浏览器都更偏好 SVG 或 PNG 图标;然而 Windows 快捷方式、RSS 阅读器,以及一长串嵌入式浏览器至今仍会直接请求 /favicon.ico。它只是个很小的文件,却能避免在你从不测试的地方出现一个坏掉的图标。
透明度会被保留吗?
会。每个尺寸都作为带 alpha 通道的完整 PNG 存放在容器里,所以你的 SVG 没有绘制的地方保持透明。这一点在图标上比在任何别的东西上都更重要,因为浏览器标签页、任务栏和书签栏的底色各不相同,一个白框在每一处都会露馅。
我的 16 像素预览看不清 - 该怎么办?
去简化,而不是去锐化。16 像素总共只有 256 个像素,细描边、小字和紧凑的细节都撑不住。多数好图标在那个尺寸下就是一个粗壮的单一形状。请为小尺寸单独画一个简化版本,而不是指望某个转换器能拯救那个精细的版本。
为什么最大的尺寸写在文件最前面?
因为某些 Windows 外壳版本会直接取它能用的第一个条目,而不去搜索最佳匹配。把 256 像素的图像写在最前面,能让这些程序拿到高分辨率版本;而其他所有读取方本来就会读完整个目录并正确选择。这样做没有任何代价,却避开了一整类你看不见的缺陷。
ICO 能装下超过 256 像素的尺寸吗?
不能。目录条目用各一个字节存放宽和高,所以 256 就是上限 - 而且它被存成零,这是这个格式唯一真正古怪的地方。要更大的就该用 PNG:使用我们的 SVG 转 PNG 工具,填入你需要的任意像素尺寸即可。
同一个 ICO 能用于 Windows 桌面应用吗?
可以 - 这里产出的容器是标准的多尺寸 ICO,正是 Windows 可执行文件资源段所期望的格式。把你的安装程序或构建工具指向它即可。注意 256 像素的条目是以 PNG 而非原始位图数据存放的,Windows Vista 及之后的版本都能正常读取。
你们会上传我的文件吗?
不会。渲染、编码和打包全都在你的浏览器里完成。你的图稿不会发送到任何服务器,除了你自己的下载文件夹之外不会写到任何地方,我们也永远看不到它。这也意味着不存在排队等待 - 速度的唯一限制是你自己设备的性能。
您可能还需要
有问题吗? 报告问题