使用方法
- 粘贴图标的 Base64 字符串或 data URI,也可以粘贴想要制作成图标的图片。
- 查看预览和尺寸。源图片是正方形时,图标效果最干净。
- 下载格式已预设为 ICO。选择一个尺寸(16、32、48、64、128 或 256 像素),或选择多尺寸图标。
- 下载 .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 × 48 | Windows 桌面和资源管理器图标 |
| 64、128 | 较大的预览和应用列表 |
| 256 × 256 | Windows 的大图标和超大图标视图 |
多尺寸选项会把 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 数据存储,圆角和柔和边缘都会保持透明。