UltKit

SVG转图标

一个矢量Logo就能满足所有图标用途:网站favicon、Windows快捷方式、Mac应用以及手机桌面图标。本页默认输出多尺寸ICO,也可切换为ICNS或PNG,供其他平台使用。

图片格式转换

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

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

输出

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

使用方法

  1. 1

    上传正方形SVG

    添加你的标志 SVG,最好是 viewBox 为正方形的文件。一次最多可添加 20 个文件,例如浅色和深色两个版本。

  2. 2

    选择图标格式

    默认已选中 ICO,且 图标尺寸 为“全部尺寸(16–256)”。macOS 请在 转换为 中选择 ICNS;手机或应用商店图标请选择 PNG,并在 调整输出图片尺寸 中设置宽度。

  3. 3

    转换并放置文件

    点击 转换为 ICO(按钮文字会随你选择的格式变化),下载后把每个文件放到对应平台要求的位置。

图标没有统一的格式。Windows 和浏览器使用 ICO,macOS 使用 ICNS,手机使用成套的 PNG。从 SVG 开始,意味着每一种图标都由矢量图重新绘制,在各个尺寸下都清晰。

SVG转图标:一个矢量图,三类图标文件

图标文件是由多张小位图组成的容器,而不是矢量图。操作系统会选取最接近所需尺寸的位图,所以好的图标会包含多个尺寸,每个都按各自的像素网格渲染。

本页的 ICO 预设会生成一个包含 16 到 256 px 所有尺寸的文件,可用于 favicon.ico 和 Windows 快捷方式。把 转换为 切换为 ICNS 可得到 Apple 图标容器,切换为 PNG 则可得到 Android、iOS 和应用商店要求的单一尺寸。

下表列出了主要平台为各图标位置公布的要求。

各平台所需的图标文件
机构要求来源
Windows 桌面和任务栏包含多个尺寸的 ICO,包括 16、32、48 和 256 px—
网站图标(favicon)放在网站根目录的 favicon.ico,含 16、32 和 48 px;apple-touch-icon 使用 180 × 180 px 的 PNG—
macOS 应用图标ICNS 或 Xcode 资源目录,尺寸最大 1024 × 1024 px—
Google Play 商店详情页512 × 512 px 的 32 位 PNG,最大 1,024 KB—
Apple App Store1024 × 1024 px 的 PNG,不带透明—

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转图标”。每个平台都有各自的图标容器,从网站的 favicon.ico、Mac 上的 ICNS,到应用商店里的指定尺寸 PNG。

将SVG转换为Windows、Mac、Android和iOS图标

保持 ICO,并让 图标尺寸 为“全部尺寸”。用于网站根目录时把结果重命名为 favicon.ico,或在 Windows 快捷方式的“更改图标”对话框中指向它。

  • 一个 .ico 即可用于标签页、书签和任务栏
  • 再添加一个 180 px 的 PNG,用于 iPhone 主屏幕书签

设计在16 px下依然清晰的SVG

16 × 16 px 的图标总共只有 256 个像素。多数品牌会单独准备图标标志,通常只用符号或一个字母,形状醒目、颜色很少;如果你还没有,可以复制一份 SVG 并简化,专门用于图标。

转换前先检查 viewBox。过宽的 viewBox 会让图标在标志上下出现空白带,所以请先裁剪为正方形;按比例裁剪图片的指南介绍了正方形裁剪,SVG转PNG 则可快速生成大图预览,方便判断设计效果。

SVG转图标常见问题

本页与SVG转ICO有什么区别?

SVG转ICO 专注于生成单个 .ico 文件,用于网站图标和 Windows。本页涵盖图标的所有使用场景,包括 macOS 的 ICNS,以及 Android、iOS 和应用商店要求的固定尺寸 PNG。

各操作系统分别使用哪种图标格式?

Windows 读取 ICO,macOS 读取 ICNS 或在 Xcode 中构建的资源目录,Android 和 iOS 使用按固定像素尺寸提供的 PNG 图片。

一次转换能得到应用所需的全部PNG尺寸吗?

不能。一个 PNG 只包含一种尺寸,所以每次转换只生成一个宽度。先把 调整输出图片尺寸 设为一个尺寸并转换,再修改数值重新转换;每个尺寸都是直接从矢量图绘制的,保持清晰。

本页生成的ICNS支持Retina Mac图标吗?

其中包含 16 到 256 px 的尺寸。当前的 macOS 应用图标还包含适用于 Retina 显示屏的 512 px 和 1024 px,这两个尺寸由 Xcode 或 Apple 的 iconutil 通过 PNG 生成;请在这里把它们导出为 PNG,再加入图标集。

图标应该保留透明背景吗?

对于 ICO、ICNS 和 Android 启动图标图层,建议保留透明:系统会自行绘制背景。iOS App Store 图标是例外;Apple 会拒绝带 Alpha 通道的 1024 px 宣传图标,所以请在 SVG 中为这张 PNG 设置纯色背景。

为什么细节丰富的Logo缩成小图标后糊成一团?

在 16 或 32 px 下,细线和小字都没有空间。请加粗线条,使其在最小尺寸下至少占满一个像素,并去掉文字标识。