ICO 是网站 favicon、Windows 快捷方式和桌面图标里最常见的图标格式之一。很多人以为把 png 改名成 ico 就可以了，但这并不是真正的 ICO 文件。
真正的 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：大图标、高分屏和桌面场景。
用 toolgarden.xyz 转换成 ICO
ToolGarden 的图片转 Icon 工具支持 PNG、SVG、JPG、WebP、BMP、AVIF 等常见输入格式。图片会在浏览器本地读取、缩放、圆角裁剪和打包，整个过程不会上传到服务器。
网站 favicon 怎么引用 ICO？
生成 ICO 后，最简单的做法是把它命名为 favicon.ico，并放到网站根目录。现代框架也可以通过 metadata 或 head 标签引用。
<link rel="icon" href="/favicon.ico" sizes="any">常见问题
ICO 可以保留透明背景吗？
可以。只要源图有透明通道，并且生成过程使用 32 位颜色数据或 PNG 图标数据，ICO 就可以保留透明背景。
JPG 转 ICO 后为什么没有透明背景？
因为 JPG 格式本身没有 Alpha 通道。想要透明图标，建议先使用 PNG、SVG 或 WebP 源图，或者先移除背景再转换。
总结
PNG、JPG、WebP 转 ICO 的关键不是扩展名，而是生成真正的 ICO 容器，并包含多套尺寸。这样浏览器、Windows 和快捷方式场景才能选择最合适的图标资源。
如果你只是临时做一个网站 favicon，用 toolgarden.xyz 这类浏览器本地工具会更方便：上传、预览、生成多尺寸 ICO，一步到位。