制作网站图标时，你可能同时看到 favicon.ico、SVG favicon 和 PNG favicon。它们不是同一种文件换了扩展名，而是结构、缩放方式和兼容场景都不同的图标方案。
ICO 文件是什么？
ICO 是一种图标容器格式，常用于网站 favicon、Windows 应用、桌面快捷方式和文件图标。它不是单独一张位图，而是由文件头、图标目录和一组独立图像数据组成。
一个 ICO 可以同时保存 16x16、32x32、48x48、128x128 和 256x256 等多张图标。浏览器或操作系统读取目录后，会为当前界面选择最合适的条目，而不必每次都把同一张图片强行缩放。
哪些图片适合转换成 ICO？
| 源格式 | 是否适合 | 注意事项 |
|---|---|---|
| PNG | 非常适合 | 支持透明背景，适合 logo、图标和 UI 标识 |
| SVG | 适合 | 矢量图缩放清晰，但需要浏览器能正确解码 |
| JPG/JPEG | 可以使用 | 没有透明通道，适合照片类图标，不适合透明 logo |
| WebP | 可以使用 | 支持透明和压缩，但兼容性取决于浏览器解码能力 |
| BMP/AVIF | 视浏览器而定 | 只要当前浏览器能解码，就可以先绘制到 Canvas 再导出 |
PNG/JPG/WebP 转 ICO 的推荐步骤
- 准备清晰源图，建议至少 512x512 像素。
- 如果是 logo，优先使用透明背景 PNG 或 SVG。
- 把主体放在正方形画布中央，避免边缘过于贴近画布。
- 生成多尺寸 ICO，而不是只生成一个 32x32 图标。
- 在浏览器标签页、收藏夹和 Windows 快捷方式中检查显示效果。
技术实现：ICO 文件是怎么生成的？
图片转 ICO 的核心流程通常包括解码、重绘、导出和打包四步。浏览器里的实现可以完全在本地完成，不需要把图片上传到服务器。
- 图片解码：读取用户上传的 PNG、JPG、WebP、SVG 等文件，通过浏览器 Image 对象解码出真实宽高。
- Canvas 重绘：为每个目标尺寸创建正方形 Canvas，例如 16、24、32、48、64、128、256px。
- 高质量缩放：使用 Canvas drawImage 按比例绘制，并开启高质量平滑，减少缩小后的锯齿和发虚。
- 透明处理：PNG、SVG、WebP 的 Alpha 通道可以保留；JPG 没有透明通道，通常会保留不透明背景。
- ICO 打包：写入 ICONDIR header 和各尺寸的 ICONDIRENTRY，记录位深、长度与偏移；小尺寸可用 32 位 BGRA DIB，256px 常直接保存 PNG 字节。
为什么 ICO 要包含多个尺寸？
如果 ICO 只包含一个尺寸，浏览器和系统遇到其他显示场景时只能强行缩放。例如你只提供 32px 图标，浏览器标签页可能看起来还可以，但 Windows 快捷方式或高分屏场景就可能变糊。
- 16x16：浏览器标签页、地址栏、传统小图标场景。
- 32x32：高分屏浏览器标签页、收藏夹和常规 favicon 场景。
- 48x48：Windows 资源管理器和快捷方式常见尺寸。
- 128x128 / 256x256：大图标、高分屏和桌面场景。
favicon.ico、SVG favicon、PNG favicon 怎么选？
三种格式没有绝对的优劣。选择时要看浏览器兼容、图标是不是矢量、是否需要固定像素效果，以及它会不会被用于主屏图标或 PWA。
| 格式 | 适合场景 | 主要特点 |
|---|---|---|
| favicon.ico | 通用网站兼容入口、旧环境、Windows 快捷方式 | 兼容性稳，一个文件可包含多个位图尺寸 |
| SVG favicon | 现代浏览器、矢量 logo、需要适配高分屏 | 缩放始终清晰，一个文件即可覆盖多种显示密度 |
| PNG favicon | 固定像素图标、Apple Touch Icon、PWA | 透明和像素效果可控，但不同尺寸通常需要独立文件 |
对普通网站来说，最稳妥的方案不是只选一个，而是组合使用：保留 favicon.ico 作为兼容入口，为现代浏览器提供 SVG，并为 Apple Touch Icon 和 PWA 准备明确尺寸的 PNG。
- favicon.ico：放在网站根目录，作为浏览器和旧环境的兼容入口。
- icon.svg：用于现代浏览器，适合轮廓清晰的矢量 logo。
- favicon-32x32.png：当 SVG 不适合或需要精确像素效果时使用。
- apple-touch-icon.png：通常使用 180x180 PNG，供 iOS 主屏快捷方式使用。
- PWA 图标：在 manifest 中提供 192x192 和 512x512 PNG。
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">用 ToolGarden 把图片转换成 ICO
ToolGarden 的图片转 Icon 工具支持 PNG、SVG、JPG、WebP、BMP、AVIF 等常见输入格式。图片会在浏览器本地读取、缩放、圆角裁剪和打包，整个过程不会上传到服务器。
生成后怎么检查 favicon？
favicon 很容易受到浏览器缓存影响。替换文件后看不到变化，不一定是生成失败，也可能是浏览器仍在使用旧图标。
- 确认图标 URL 可以直接访问，并返回正确的 MIME 类型。
- 在普通标签页、高分屏设备、书签和桌面快捷方式中分别检查。
- 清除 favicon 缓存，或临时修改文件名和 href 进行验证。
- 同时预览浅色与深色浏览器界面，避免透明边缘或主体对比度不足。
透明背景注意事项
ICO 可以保留透明背景吗？
可以。只要源图有透明通道，并且生成过程使用 32 位颜色数据或 PNG 图标数据，ICO 就可以保留透明背景。
JPG 转 ICO 后为什么没有透明背景？
因为 JPG 格式本身没有 Alpha 通道。想要透明图标，建议先使用 PNG、SVG 或 WebP 源图，或者先移除背景再转换。
总结
ICO 是能保存多套位图尺寸的图标容器，因此适合兼容性要求高的 favicon 和 Windows 场景。SVG 适合现代浏览器中的矢量品牌图标，PNG 则适合固定像素效果、Apple Touch Icon 和 PWA。
把图片转换成 ICO 时，不要只修改扩展名。使用 ToolGarden 图片转 Icon 上传源图、调整构图并生成真正的多尺寸 ICO，再配合 SVG 和 PNG 资源，就能覆盖常见的网站与桌面图标场景。