SVG 转 ICO 转换器
把 SVG 拖到下方,就能得到一个 ICO 文件。矢量图会按你选择的每个尺寸(16 到 256 px)分别绘制,所以 .ico 里的每个图标都是针对它自己的像素网格渲染的,而不是从一张大位图缩小而来。生成的文件可以用作 favicon.ico 或 Windows 图标。从设备添加的 SVG 只留在你的浏览器里。
拖放 SVG,或从剪贴板粘贴
或点击浏览从剪贴板粘贴 (Ctrl+V)
支持:png, jpg, webp, gif, bmp, avif, svg。最大 10MB。
转换前先检查你的 SVG
- 加上 viewBox。 根 svg 元素需要有 viewBox 属性,图形才能缩放到正方形里。没有它,图标可能被裁切、偏离中心,甚至一片空白。
- 把文字转成轮廓。 没有转曲的文字会用浏览器装有的字体来渲染。在 Figma、Illustrator 或 Inkscape 里把文字转换为路径,字母在每台电脑上才会显示得一样。
- 嵌入图片和样式。 浏览器把 SVG 绘制到 canvas 上时,不会加载链接的图片或外部样式表,所以它们会从图标里消失。请把图片以 data URI 的形式内联,并把 CSS 保留在文件内部。
- 为 16 px 做简化。 比一个像素还细的描边,在 16 和 32 px 下会糊成一片灰色。如果图标主要显示在浏览器标签页里,转换前先把细线加粗,并去掉细小的细节。
如何把 SVG 转换为 ICO
- 添加 SVG. 把它拖到上传框里、从设备中选择,或直接粘贴。支持最大 10 MB 的文件。
- 挑选尺寸. 做 favicon 保留 16、32 和 48 px 即可。如果 Windows 要把它显示为应用图标,再加上 256 px。
- 选择缩放方式. “适应”会把整个 logo 完整放进正方形里。背景保持“透明”就好,除非你想在后面垫一层白色。
- 转换并保存. 点击“转换”,然后下载 .ico。多个 SVG 可以用“下载文件”一起保存为一个 ZIP。
SVG 转 ICO 常见问题
为什么我的 ICO 是空白的,或者缺了一部分?
通常是因为 SVG 没有 viewBox、链接了外部图片或样式表,或者用了你的浏览器里没有的字体。在 SVG 里修好这些问题,再重新转换即可。每种情况的处理方法,详见 SVG 转 ICO 问题排查指南。
ICO 还是矢量图吗?
不是。ICO 存的是固定尺寸的位图,所以 SVG 会按你选择的每个尺寸各栅格化一次。请把 SVG 留作你的源文件。
图标在 16 px 下会清晰吗?
它会直接以 16 × 16 渲染,已经是这个尺寸能达到的最清晰程度。不过比一个像素还细的细节依然保不住,所以请先简化细线。
我是不是应该改用 SVG favicon?
目前大多数浏览器都支持通过 link 标签使用 SVG favicon,但很多工具和旧版浏览器仍会请求 /favicon.ico。不少网站两者都提供:SVG 给现代浏览器,ICO 作为后备。
想看附带设计工具技巧的分步教程,可以阅读SVG 转 ICO 指南。
手上是 PNG?试试PNG 转 ICO 转换器。
JPG、WebP、GIF、BMP 和 AVIF 文件可以用首页的 ICO 转换器转换。