UltKit

SVG转ICO转换器

用SVG制作favicon是最理想的起点:每个图标尺寸都从矢量重新绘制,而不是从大尺寸位图缩小而来,因此16 px版本也能在像素网格允许的范围内保持清晰。

图片格式转换

或将JPG, JPEG, JPE … 文件拖放到此处 ·

单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除

输出

文件在我们的服务器上处理,并在 30 分钟后删除。

使用方法

  1. 1

    上传SVG Logo

    请使用标志图形或字母组合,不要使用完整的文字标志。viewBox 为正方形时效果最清晰。

  2. 2

    保留所有图标尺寸

    图标尺寸默认为“全部尺寸(16–256)”,会把所有分辨率打包进一个 .ico 文件。只有在程序明确要求单一尺寸时,才选择单个尺寸。

  3. 3

    点击“转换为 ICO”

    将文件保存为 favicon.ico,放在网站根目录,或让 Windows 快捷方式指向它。

答案

如何把 SVG 转换为 ICO 作为网站图标?

上传 SVG,保持图标尺寸为“全部尺寸(16–256)”,然后点击转换为 ICO。你会得到一个 .ico 文件,每种分辨率都由矢量图绘制,透明效果完整保留。

SVG转ICO转换器:为什么矢量是最合适的源文件

.ico 格式源于早期的 Windows,而 favicon.ico 的约定则始于 1999 年的 Internet Explorer 5,它会在你收藏的每个网站根目录中查找这个名称的文件。ICO 是一个小型容器:包含一个条目目录,每个条目是一张独立的方形位图,所以一个文件可以同时存放 16 px 的标签页图标和 256 px 的桌面图标。Windows Vista 将最大尺寸提高到 256 × 256,并允许这些大尺寸条目以 PNG 形式存储。

由于每个条目都是独立的位图,图标质量取决于每个尺寸是如何生成的。从 PNG 生成时,每个尺寸都是同一批像素的缩小结果;从 SVG 生成时,每个尺寸都是对路径的重新渲染,抗锯齿按该尺寸的网格精确计算。在 16 × 16 px 下,徽标只有 256 个像素可用,这种差别肉眼可见。

1:1

16 × 16 px

16 × 16

浏览器标签页、书签和历史记录列表。

1:1

32 × 32 px

32 × 32

高分辨率屏幕上的标签页、Windows 任务栏快捷方式。

1:1

64 × 64 px

64 × 64

缩放后的桌面视图和固定项目。

1:1

128 × 128 px

128 × 128

文件管理器中的大预览。

1:1

256 × 256 px

256 × 256

ICO 中最大的条目;资源管理器的超大图标。

SVG

可缩放矢量图形

SVG 是基于 XML 的矢量格式,2001 年由 W3C 标准化。它描述的是形状、路径和文本,而不是像素,因此在任何尺寸下都保持清晰,用于徽标和图标时通常很小。它支持透明、CSS 样式、脚本和动画,所有浏览器都能原生渲染。SVG 不适合照片,复杂的插画渲染也可能变慢。Illustrator、Inkscape、Figma 和浏览器都可以打开并编辑。

压缩方式
–
透明度
支持
动画
支持
发布年份
2001 · W3C
SVG 转换器

ICO

Windows 图标

ICO 是微软的图标格式,用于 Windows 程序图标和网站 favicon。一个 .ico 文件可包含多种尺寸的图像,例如 16×16、32×32、48×48 和 256×256 像素,系统可选择最合适的一个。每个图像可存为位图或 PNG 数据,并支持完整的 Alpha 透明度。ICO 不适合照片或大幅图稿。浏览器、Windows 和大多数图标编辑器都能读取。

压缩方式
无损
透明度
支持
动画
不支持
发布年份
Microsoft
ICO 转换器

人们把 SVG 转成 ICO,是因为徽标原本是矢量图,而网站根目录、Windows 快捷方式或桌面应用仍然需要一个包含多种位图尺寸的 .ico 文件。

SVG转ICO之前,先处理好SVG文件

建议避免
将 viewBox 设为正方形,例如 0 0 512 512。依赖在 32 px 以下会消失的极细线条。
留出少许边距,避免图形贴到图标边缘。保留宽幅文字标志,缩小后会变成一道细细的污迹。
将文字转为轮廓,避免字体发生变化。在 SVG 中引用外部图片或网络字体。
使用符号或首字母,不要使用完整名称。在徽标后加白色矩形,除非你希望它在深色标签页中也显示白底。

转换器只渲染 SVG 本身描述的内容,因此无法获取被链接的资源和未嵌入的字体。Figma、Illustrator 和 Inkscape 等设计工具可以把文字导出为路径;这样做之后,文字在任何地方都会与你的品牌保持一致。

.ico 完成后,再为 Apple 触摸图标准备一张 180 px 的 PNG,并为支持矢量网站图标的浏览器提供 SVG 本身;SVG转PNG可以按任意尺寸生成这张 PNG。如果你的源文件是位图徽标,PNG转ICO可以基于像素完成同样的工作。

SVG转ICO常见问题

为什么用SVG转ICO转换器,而不是从PNG开始制作?

PNG 要为每个图标尺寸缩小,而缩小会让边缘变模糊。SVG 则直接按 16、32、64、128 和 256 px 渲染,每个尺寸都能按自己的像素网格得到锐利的边缘。

网站已有SVG图标,浏览器还需要favicon.ico吗?

Chrome 和 Firefox 可以读取通过 link 标签声明的 SVG 网站图标,但许多浏览器、订阅阅读器和爬虫默认仍会请求网站根目录下的 /favicon.ico。两种都提供,就能全部覆盖。

SVG不是正方形会怎样?

图标位是正方形的,宽幅徽标要么留出空白边距,要么显得很小。请先把 viewBox 改成宽高相等,或者导出 PNG 后用图片裁剪工具裁出正方形版本。

转换成ICO后会保留透明背景吗?

可以。ICO 支持 Alpha 通道,SVG 中没有填充的区域会保持透明,图标在浅色和深色浏览器标签页上都显示干净。

能把SVG转ICO用作Windows程序或文件夹图标吗?

可以,同一个文件即可使用。Windows 在资源管理器的大图标和超大图标视图中读取 256 px 图像,列表和任务栏则使用较小的条目。

为什么图标在16 px下看起来是空的?

细线条和小字在这个尺寸下会消失。在 512 单位的画板中,2 单位的线条在 16 px 图标里远不足一个像素。请加粗线条,或为网站图标改用更简单的图形。