Base64 转 ICO

把 Base64 图标数据保存为 .ico 文件,或用任意 Base64 图片制作 favicon。可以选择 16 到 256 像素的单一尺寸,也可以生成包含 16、32、48、256 的多尺寸图标。

完全在浏览器中运行,不会上传任何数据。

使用方法

  1. 粘贴图标的 Base64 字符串或 data URI,也可以粘贴想要制作成图标的图片。
  2. 查看预览和尺寸。源图片是正方形时,图标效果最干净。
  3. 下载格式已预设为 ICO。选择一个尺寸(16、32、48、64、128 或 256 像素),或选择多尺寸图标。
  4. 下载 .ico 文件。如果输入本来就是 ICO,并且想原样保留其中所有图片,请选择“原始文件”。

Base64 中的 ICO 文件

ICO 文件是一个小型容器,由文件头、条目目录以及每个条目对应的图片组成,图片以 BMP 或 PNG 数据存储。文件头以字节 00 00 01 00 开头,因此图标的 Base64 以 AAABAA 起始。Base64 图标常见于 favicon 的 data URI(例如 <link rel="icon" href="data:image/x-icon;base64,...">)、单文件 HTML 页面以及返回网站图标的接口中。

正式注册的 MIME 类型是 image/vnd.microsoft.icon,但 image/x-icon 用得更广,兼容性也没有问题。

图标尺寸怎么选

尺寸典型用途
16 × 16普通屏幕上的浏览器标签页和书签
32 × 32高分辨率屏幕上的浏览器标签页
48 × 48Windows 桌面和资源管理器图标
64、128较大的预览和应用列表
256 × 256Windows 的大图标和超大图标视图

多尺寸选项会把 16、32、48 和 256 打包进同一个文件,由系统自行挑选最合适的尺寸。其中的图片采用 PNG 压缩,能保留透明效果,Windows Vista 及更高版本和所有现代浏览器都支持。

把图标用作网站 favicon

浏览器会自动从网站根目录请求 /favicon.ico,所以即使不写任何标签,把文件放在那里也能生效。在 href 中使用 Base64 data URI 可以省掉这次请求,但图标会随每个页面重新下载,无法单独缓存。现代浏览器同样支持 PNG 和 SVG 图标,常见的写法是两者结合:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

请从形状简单、对比鲜明的正方形图片开始制作,细小的细节在 16 像素下会完全看不清。如果还需要 PNG 版本,可以使用 Base64 转 PNG。

常见问题

favicon.ico 应该做成多大?

包含 16、32 和 48 像素的多尺寸图标即可满足浏览器和 Windows 的需要。本工具的多尺寸选项还额外包含 256 像素,用于大图标视图。

可以把 Base64 PNG 或 SVG 转成 ICO 吗?

可以。粘贴后把下载格式保持为 ICO,再选择尺寸即可。浏览器能显示的任何图片都可以转换。

为什么预览只显示图标的一个尺寸?

一个 ICO 文件可以包含多张图片,但预览只能显示其中一张。以“原始文件”格式下载,即可保留文件中的全部图片。

生成的 ICO 能保留透明背景吗?

能。图标以带完整 Alpha 通道的 PNG 数据存储,圆角和柔和边缘都会保持透明。

怎样把图标放进 data URI?
先用 ICO 转 Base64 编码文件,再把结果填入 <link rel="icon"> 标签的 href 属性。