Favicon 和 ICO 转 Base64

如何把 favicon 转为 Base64

1. 把 favicon.ico、PNG 或 SVG 拖到框中，或用文件选择器选择。
2. 如果是 PNG，把 最大宽度 设为 32（或 48），免得不小心内联了一个 512 像素的应用图标。ICO 和 SVG 文件按原样编码。
3. 输出为 已设为 Data URI。复制后粘贴到 href 中：

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

预览会显示图标及其像素尺寸，粘贴之前就能确认 PNG 是否真的是 32×32。

ICO、PNG 还是 SVG

favicon.ico 通常打包了 16×16、32×32 和 48×48 三种图像，它们全都会进入 Base64，所以字符串往往比预期长。对浏览器标签页来说，转换一张 32×32 的 PNG 通常就够了。

SVG favicon 可以在 SVG 内部用 prefers-color-scheme 媒体查询适配深色模式。如果要支持旧版 Safari，请保留一个 PNG 作为后备。

什么时候适合内联 favicon

• 单文件 HTML：导出的报表、离线文档、保存为单个文件的仪表盘。文件一旦移动，相对路径 favicon.ico 就指向空处。
• 内部工具和本地服务器，添加一条静态文件路由比写一行 HTML 麻烦得多。
• 动态 favicon：在 canvas 上绘制通知角标或状态颜色，再通过 link.href = canvas.toDataURL("image/png") 应用。

普通网站更适合使用单独的图标文件。浏览器只需获取并缓存一次，而内联的 favicon 会在你提供的每个 HTML 页面中重复出现。

用 JavaScript 绘制 favicon

做状态指示器根本不需要文件。在 32×32 的 canvas 上绘制，再把 data URI 赋给现有的图标链接：

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

图标没有变化时

• 一直显示旧图标。 浏览器会强力缓存 favicon，而且与页面分开缓存。不使用缓存重新加载，或在隐私窗口中打开页面，就能看到新图标。
• 什么都不显示。 检查 href 是否以正确的类型开头：data:image/png;base64,、data:image/x-icon;base64, 或 data:image/svg+xml;base64,。SVG 图标的根元素还必须带有 xmlns 属性。
• 有多个 <link rel="icon"> 标签。 浏览器会按类型和尺寸从中挑选，所以内联图标可能输给另一个声明的图标。把不需要的删掉。

转换回文件

要从 data URI 还原出 favicon.ico，请使用 Base64 转 ICO。对于 SVG 图标，SVG 转 Data URI 还能生成 URL 编码的版本，往往比 Base64 更短。

常见问题