SVG 转 ICO 转换器

SVG 转 ICO,每个尺寸都从矢量重新画:16 px 到 256 px,透明背景或放在彩色形状上。再点一下就能拿到整套 favicon 和 HTML 代码。免费,在你的设备上完成。

SVG → ICO免费 · 在浏览器里运行

·手边没有 SVG?

在你的设备上转换,文件不会上传到我们的服务器。SVG 里用到的网页字体和外部图片,会由你的浏览器从它们自己的服务器下载,以便正确显示。

  • 免费,不用注册,没有水印
  • 文件留在你的设备上
  • 每个尺寸都从矢量画
  • 附带 favicon 套装和 HTML

SVG 转 ICO 只要三步

SVG 转 ICO:添加、选择、下载。

  1. 1

    添加 SVG

    一次最多 50 个 .svg 或 .svgz 文件,每个 20 MB,也可以直接粘贴 SVG 代码。

  2. 2

    选尺寸和背景

    默认 16、32、48、256 px。保持透明,或选一种颜色,放在方形、圆角或圆形上。

  3. 3

    保存 ICO 图标

    在列表里看清每个尺寸,再保存 ICO、ZIP 或 favicon 套装。

示例

六个 SVG 转 ICO 示例

为本页原创绘制的图标,每个都是 SVG 转 ICO 常出问题的情况。

细线图标

细线图标

256 × 256 px · ICO · 16, 24, 32, 48, 256

24 px 的线条图标在每个尺寸重画;24 和 48 px 时线条正好落在整像素上。

深色模式 favicon

深色模式 favicon

256 × 256 px · ICO · 16, 32, 48, 256

favicon 套装里的 icon.svg 保留 SVG 的深色模式配色。

圆形徽章

圆形徽章

256 × 256 px · ICO · 16, 32, 48, 256

圆形背景加 10% 边距,四角保持透明。

渐变标志

渐变标志

256 × 256 px · ICO · 16, 32, 48, 256

每个尺寸标志周围都透明,柔和边缘保留。

Windows 应用图标

Windows 应用图标

256 × 256 px · ICO · 16, 24, 32, 48, 128, 256

白色符号放在紫色圆角底上,六个尺寸,最大 256 px。

像素画爱心

像素画爱心

256 × 256 px · ICO · 16, 32, 48, 64, 256

16、32、48、64、256 px 都是整数倍,每个像素都保持方正。

什么样的 SVG 适合转 ICO

ICO 图标又小又是方的,有些 SVG 更合适。

适合

  • 接近方形的标志和符号。
  • 按 16 或 24 px 网格画的线条图标。
  • 16 px 的像素画,按整数倍保存。
  • 带透明、渐变或柔和边缘的标志。

转换前要知道

  • 很宽的文字标志到 16 px 只剩一条细线,建议只用符号部分。
  • 小字和细节在 16 px 会看不清,所有 favicon 都一样。
  • ICO 图标是方的:太高或太宽的 SVG 会居中,四周留空。
  • 动画:ICO 只保留开头那一帧。

提示:要给应用商店或头像用的大 PNG?打开 SVG 转 PNG。

这个 SVG 转 ICO 工具为什么清晰

很多 SVG 转 ICO 工具只存一个尺寸,常常还是白底,或者把一张大图缩小塞进所有尺寸。

01

每个尺寸都清晰

每个尺寸都按自己的大小从矢量重新画,16 px 的 ICO 图标就是真正的 16 px,不是 256 缩小来的。

02

保留透明

透明区域在每个尺寸里都保持透明。小尺寸存 32 位 BMP,128 和 256 px 存 PNG,和 Windows 自带图标的存法一样。

03

一键 SVG 转 favicon 套装

favicon.ico、保留深色模式的 icon.svg、apple-touch-icon、192 和 512 px 应用图标和 manifest,外加放进 <head> 的几行代码。

04

背景、形状和边距

透明、白色、黑色或任意颜色,做成方形、圆角或圆形,边距 5% 到 20%。

05

保存前看到每个尺寸

每个文件按真实像素显示小尺寸,16 px 图标上线前就能看到。

06

批量、ZIP、隐私

一次最多 50 个 SVG 文件,打包成一个 ZIP。全部在你的设备上完成,不上传。

SVG 转 ICO 指南:尺寸、透明和 favicon

SVG 转 ICO 时文件里装什么,每个尺寸用在哪里。

ICO 文件需要哪些尺寸

一个 ICO 里装着几张方形图片,各处取自己要的那张。16 px 用在浏览器标签和书签,32 px 用在高清屏标签和 Windows 任务栏,48 px 用在桌面和 Google 搜索结果,256 px 用在 Windows 大图标视图。做 favicon 有 16、32、48 px 就够;做 Windows 应用或快捷方式,再加上 24、64、128 和 256 px。

为什么每个尺寸都从矢量画

把一张 256 px 图片缩到 16 px,细线会被平均成灰色的糊。这个 SVG 转 ICO 转换器在每个尺寸重新画一遍 SVG,每个尺寸都有自己干净的边缘,而不是大图缩出来的模糊副本。看一下列表里的 16 px 图标:如果那里丢了细节,换一个更简单的符号比加像素更有用。

透明、背景形状和边距

ICO 文件保留完整的透明通道,透明区域和柔和边缘在任何任务栏或标签上都是透明的。选一种背景色,就能把标志放在方形、圆角或圆形上;圆角和圆形四周的角落保持透明。贴边的标志加 10% 到 15% 边距会更舒展。

SVG 转 favicon 套装和 HTML 代码

浏览器至今仍会请求 /favicon.ico,所以它是基础。新浏览器优先用 icon.svg,任意尺寸都清晰,还保留 SVG 的深色模式配色。iPhone 用 180 px 的 apple-touch-icon.png,SVG 透明时用白底,因为 iOS 会把透明显示成黑色。安卓和安装的应用从 manifest 读取 192 和 512 px 图标。把文件放在网站根目录,再把四行代码粘贴到 <head> 里。

像素画和细线图标

像素画只有在网格的整数倍时才保持方正:16 px 的设计适合 16、32、48、64、128 和 256 px,24 px 会让像素大小不一。按 24 px 网格画的线条图标在 24 和 48 px 最好看;到 16 px 会重新画,比一个像素还细的线会变柔。

SVG 转 ICO 用在哪里

这些地方仍然要 ICO 图标。

  • 网站 favicon

    根目录放 favicon.ico,再加上给手机和应用的整套图标。

  • Windows 应用和安装包

    一个 16 到 256 px 的 ICO 图标,给 Electron、.NET 或安装包制作工具用。

  • 快捷方式和文件夹

    给 Windows 桌面快捷方式和文件夹换图标。

  • 网页应用

    可安装的网页应用要用的 192、512 px 图标和 manifest。

SVG 转 ICO 常见问题

怎么转换、favicon 尺寸、favicon.ico 还用不用、透明、SVG favicon、Windows 图标、模糊和隐私。









开始 SVG 转 ICO

每个尺寸都清晰,保留透明,附带 favicon 套装。免费,在你的设备上完成。