上传图片或输入文字,生成多尺寸 Favicon 图标。
预览
使用方法 - 复制以下代码到 HTML 的 <head> 中:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
Favicon生成器把一张图片或一行文字转成浏览器标签页、书签栏、手机桌面能认的图标文件。它输出标准 favicon.ico(内含16x16、32x32、48x48多帧)以及16、32、48、64、128、256像素的PNG,解决的是「设计稿只有1024px大图,但浏览器要16px小图」的尺寸适配问题。比如你刚给公司官网换了新Logo,源文件是2000x2000的PNG,直接改名为favicon.ico浏览器会显示模糊或干脆不显示,用这个工具勾选16/32/48三档,30秒就能拿到一个多尺寸ICO,丢到网站根目录即可。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 生成耗时 | 上传后约1-3秒出全部尺寸 | Photoshop逐个导出6个尺寸再合并ICO,约10-15分钟 |
| ICO多帧支持 | 自动把16/32/48/64/128/256打包进一个ICO | 需装ICO插件或用ImageMagick命令行 convert a.png -define icon:auto-resize=16,32,48 b.ico |
| 文字转图标 | 输入「ET」直接生成,可调背景色和字号 | 得先在设计软件里打字、调字体、导出,再转ICO |
| 隐私 | 图片只在浏览器内存和canvas里处理,不上传 | 在线转换站多数要把图传到服务器,存在留存风险 |
| 费用 | 免费,无尺寸或次数限制 | 部分在线工具免费版只给16x16,多尺寸要付费 |
ICO格式单帧理论上限是256x256,这也是Windows和主流浏览器实际支持的最大值。超过256的图会被系统缩到256再读,所以生成256x256 PNG就够了,没必要塞512。本工具最高提供256x256,正好卡在这个边界上。
16x16只有256个像素点,任何复杂图形都会丢细节。经验做法是:小于32px的图标只保留1到2个视觉元素,线条宽度至少2px,文字不超过2个字符。比如「ET」两个字在16x16下每个字母只剩约6x8像素,笔画细于1px就会糊成灰块。
看使用场景。浏览器标签页背景色不固定,透明PNG在深色主题下容易看不清深色Logo;纯白底在浅色标签栏又会显得突兀。折中方案是给图标加一个圆角矩形底,比如 #ffffff 底配 #333 图形,或 #1a73e8 底配白字,这样在两种主题下对比度都≥4.5:1。
取决于你勾选的尺寸。勾16、32、48三档,ICO里就有3帧;再勾64、128、256,最多6帧。文件体积大致是各帧PNG之和,6帧全勾通常也就20-60KB。浏览器会按当前显示尺寸自动挑最接近的一帧,不会全部加载。
浏览器对favicon缓存很激进,Chrome默认缓存约24小时,Firefox类似。强制刷新用 Ctrl+F5(Mac是 Cmd+Shift+R),或者给链接加版本号:href="/favicon.ico?v=2"。另外确认文件确实在根目录,路径写错会静默回退到默认图标。
本工具在浏览器本地用Canvas绘制并打包ICO,图片不会离开你的设备,断网也能用。输出尺寸固定为16、32、48、64、128、256六档,不支持自定义非标准尺寸如180x180(Apple Touch Icon需单独用PNG)。ICO内帧为PNG压缩,兼容Chrome、Firefox、Safari、Edge及Windows资源管理器。