SVG 转 ICO
将矢量 SVG 栅格化为 favicon.ico 文件,可选 16、32、48、64、128 或 256 像素——100% 在浏览器中完成。
源文件
将 SVG 文件拖到此处
或点击选择文件
选项
SVG 是什么?
SVG(Scalable Vector Graphics,可缩放矢量图形)是万维网联盟(W3C)于 2001 年标准化的一种基于 XML 的矢量图像格式。与 JPG、PNG 或 WebP 等光栅格式不同,SVG 文件以数学描述而非像素网格存储形状、路径、文本和渐变。这意味着 SVG 可缩放至任意尺寸——从微小图标到巨型广告牌——而不会损失锐度或产生像素化。SVG 也是人类可读的文本,便于搜索、可用 CSS 设置样式、可用 JavaScript 制作动画,对简单 logo 和图标而言极其紧凑。
正因矢量特性,SVG 是必须在任意分辨率下保持清晰的 logo、图标和品牌图形的理想源格式。然而 .ico favicon 是光栅容器,因此 SVG 必须先栅格化到正方形 canvas 上,再包装进 .ico 文件。本工具会按您选择的尺寸自动完成栅格化。
ICO 是什么?
ICO 是微软于 1985 年为 Windows 1.0 操作系统引入的历史悠久的图标容器格式。.ico 文件并非单一图像格式,而是一个小型容器,可容纳一张或多张位图或 PNG 压缩图像,支持不同尺寸(通常为 16×16、32×32、48×48、64×64、128×128、256×256)和色深。浏览器、Windows 外壳、书签管理器和桌面快捷方式都会在网站根目录寻找 .ico 文件(通常命名为 favicon.ico),以在标签页、历史列表、地址栏和桌面显示网站图标。
尽管现代浏览器也可通过 <link rel="icon"> 标签使用 PNG、SVG 和 WebP favicon,但 .ico 格式仍是被最广泛识别的 favicon 容器。旧版浏览器和许多第三方工具(书签管理器、RSS 阅读器、桌面链接生成器)仍会默认请求 /favicon.ico,因此在该 URL 放置一个真实的 .ico 文件是保证所有访客都能看到网站图标的最稳妥方式。本工具生成包含所选尺寸 PNG 压缩图像的单尺寸 .ico 文件。
SVG 与 ICO 对比
SVG 和 ICO 服务于根本不同的用途:SVG 是以数学形式存储形状的矢量格式,而 ICO 是专为图标和 favicon 设计的光栅容器。下表汇总了 SVG 与 ICO 格式的关键区别。
| 特性 | SVG | ICO |
|---|---|---|
| 图像类型 | 矢量(数学描述) | 光栅容器(像素) |
| 发布年份 | 2001 | 1985 |
| 缩放 | 无限缩放,无损 | 每张图像固定分辨率 |
| 典型用途 | logo、图标、插画 | favicon、应用图标、快捷方式 |
| 透明通道 | 支持(天然) | 支持(通过嵌入 PNG) |
| 动画 | 支持(SMIL/CSS/JS) | 不支持(静态容器) |
| 单文件多尺寸 | 不支持(单矢量) | 支持 |
| 浏览器支持 | 所有现代浏览器 | 所有浏览器(旧版 favicon 格式) |
| 默认请求 URL | — | /favicon.ico |
简而言之,SVG 在可缩放性、可编辑性和简单图形体积上占优,ICO 在旧版 favicon 兼容性上占优。将 SVG logo 转换为 .ico 文件可将矢量图形栅格化为固定分辨率像素图像,被所有浏览器、书签工具和桌面快捷方式生成器识别——包括那些仍寻找 /favicon.ico 的旧版工具。
何时需要 SVG 转 ICO
虽然 SVG 是出色的格式,但在许多真实场景下将其栅格化为 .ico favicon 是更好的选择。每当平台、服务或工作流需要真实 .ico 文件而非矢量图形时,SVG 转 ICO 都能让您兼得 SVG 的设计质量和 ICO 的广泛兼容性:
- 新网站上线。在站点根目录放置真实的
favicon.ico可确保所有浏览器——包括忽略<link rel="icon">标签的旧版浏览器——在标签页中显示您的图标。 - 旧版工具兼容性。书签管理器、RSS 阅读器和桌面链接生成器仍会直接请求
/favicon.ico。SVG 无法满足该请求,但 .ico 文件可以。 - 桌面快捷方式。用户将 URL 拖拽到桌面时,Windows 和许多 Linux 文件管理器会从
favicon.ico获取图标,因此需要真实的 .ico 文件才能呈现清晰的快捷方式。 - 渐进式 Web 应用。PWA 的
manifest.json可在旧版安装上下文及较旧 Android 和 Windows 外壳集成中引用 .ico 文件。 - Windows 应用图标。许多 Windows 开发工具在为编译后的可执行文件分配应用图标时仍要求 .ico 文件。
- 品牌一致性。在网页、桌面和书签渠道统一分发同一个 .ico 文件,让图标在各处保持一致,即便您的母版是 SVG。
请将源 SVG 作为可编辑母版保留——它可在任意分辨率下重新导出。.ico 导出仅用于 ICO 仍是预期格式的部署场景。
如何将 SVG 转换为 ICO
使用本工具将 SVG 矢量图转换为 .ico favicon 只需几秒,且全部在浏览器内完成。无需上传、无需注册、无需安装。工具通过 data URL 加载 SVG(使外部引用被内联),按所选尺寸将其栅格化到正方形 canvas 上(保持纵横比并居中于白色背景),然后通过 Canvas API 将 canvas 重新编码为 .ico 容器。请按以下四步操作:
- 上传 SVG 文件。点击上传区域,或从电脑拖拽一个 .svg 文件到此处。SVG 会作为 data URL 加载并显示预览。
- 选择 ICO 尺寸。从 16、32、48、64、128 或 256 像素中任选其一。32×32 是标准 favicon 尺寸;16×16 是经典标签页图标;48×48 及以上用于高 DPI 显示和桌面快捷方式。
- 转换为 ICO。点击"转换为 ICO"按钮。工具会将 SVG 栅格化到所选尺寸的正方形 canvas 上,并将 PNG 字节包装进单图像 .ico 容器,并排显示原始与转换后的文件大小。
- 下载 ICO。点击"下载 ICO"将
favicon.ico保存到设备。将其上传到网站根目录或放入项目的资源文件夹。
由于所有步骤都通过 JavaScript 在浏览器本地运行,SVG 图片绝不会被上传到服务器。这让转换过程完全私密、快速,也适合处理敏感的品牌资产。
这个 SVG 转 ICO 转换器免费吗?
完全免费,无注册、无水印、无限制(仅受设备内存限制)。
为什么我的 SVG 文件加载失败?
引用外部资源或使用不支持特性的 SVG 可能无法解码。请先在浏览器中打开 SVG 确认其有效。本工具通过 data URL 内联 SVG 以最大化兼容性。
.ico 文件支持透明吗?
支持。本工具将 PNG 字节嵌入 .ico 容器,因此源 SVG 的 Alpha 透明通道会在输出 favicon 中保留。注意:canvas 会先填充白色,因此完全透明区域会变成白色——请保持 logo 不透明以获得最佳效果。
我的图片会被上传吗?
不会。所有处理都在本地完成,SVG 不离开浏览器。