ICO 转 Base64 工具

将 .ico 网站图标编码为 Base64,直接嵌入网页。原文件不做任何改动,图标中存储的每一种尺寸都会保留。

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

使用方法

  1. 将 .ico 文件拖到上传区域,点击选择文件,或粘贴图片。
  2. 保持原格式,图标中存储的所有尺寸都会保留在输出中。
  3. 查看编码后大小,包含多种尺寸的图标可能比预想的更大。
  4. 复制 Data URI 用于 favicon 的 link 标签,或复制 img 标签、CSS、Markdown 输出。

ICO 格式

ICO 是 Windows 的图标格式,也是最早的 favicon 格式。它是一种容器:开头的目录列出一张或多张图片的宽度、高度和色深,每张图片以位图数据存储,256×256 这类大尺寸则以内嵌 PNG 的形式存储。典型的 favicon.ico 包含 16、32 和 48 像素三种版本,浏览器会挑选最清晰的一种。

正式注册的 MIME 类型是 image/vnd.microsoft.icon,但 image/x-icon 用得更普遍,浏览器两者都接受。ICO 数据的 Base64 以 AAABAA 开头,这是文件头编码后的结果。

用 Data URI 作为 favicon

<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">

内嵌 favicon 适合单文件 HTML 文档,例如导出的报告、保存到本地的仪表盘和离线文档,也适合不想额外部署文件的原型和内部工具。对于页面很多的网站,普通的 /favicon.ico 通常更好:它只下载一次就会被缓存,而 Data URI 会在每个 HTML 响应中重复出现。

如果完全不需要图标,可以写 <link rel="icon" href="data:,">,浏览器就不会再请求 /favicon.ico。

ICO、PNG 还是 SVG 图标

现代浏览器同样支持 PNG 和 SVG 格式的 favicon,例如 <link rel="icon" type="image/png" href="data:image/png;base64,...">。单张 32×32 的 PNG 往往比多尺寸 ICO 更小,可以使用 PNG 转 Base64 或 SVG 转 Base64。

在这里把 ICO 转换为 PNG、JPEG 或 WebP 时,只会保留一张图片,即浏览器选择显示的那一张。如果要反过来生成 ICO 文件,可以先编码一张 PNG,再把结果粘贴到 Base64 转 ICO 中,它能输出 16 到 256 像素的图标。

常见问题

应该用 image/x-icon 还是 image/vnd.microsoft.icon?
浏览器两者都支持。image/vnd.microsoft.icon 是正式注册的类型,image/x-icon 则是大多数网站的写法。如果某个系统要求特定类型,复制后修改前缀即可。
Base64 输出会保留所有图标尺寸吗?

保持原格式时会。整个文件都被编码,浏览器仍然可以挑选需要的尺寸。转换为其他格式则只保留一张图片。

Data URI 形式的 favicon 在所有浏览器中都有效吗?

当前的桌面浏览器都会在标签页上显示它。书签、主屏幕快捷方式和一些旧浏览器可能会忽略内嵌图标,因此公开网站仍应提供 favicon 文件。

如何从 Base64 生成 ICO 文件?
把 PNG 的 Base64 或 Data URI 粘贴到 Base64 转 ICO 中,选择需要的尺寸并下载 .ico 文件。