16 任务栏 / 浏览器标签;32 桌面快捷方式;48 文件夹与资源管理器;256 是高清场景(Win10 大图标、应用商店)。
勾得越多文件越大,做 favicon 勾 16 + 32 + 48 就够。
源图不是正方形时用「居中裁切」效果最好;需要保留完整画面(比如 Logo 有留白)就选「完整缩放」。
选张图,勾好尺寸,一键变成 .ico。
一个 .ico 文件里可以塞多张不同尺寸的图,系统会自动挑最合适的那张显示。
| 尺寸 | 典型用途 | 是否必选 | 说明 |
|---|---|---|---|
| 16 × 16 | 浏览器标签页图标、任务栏、窗口标题栏 | 必选 | 最小最常用,细节会糊,建议单独画一版简化图 |
| 32 × 32 | 桌面快捷方式(默认)、中等图标视图 | 推荐 | Windows 桌面最常见的显示尺寸 |
| 48 × 48 | 文件夹图标、资源管理器「大图标」 | 推荐 | Win 标准大图标尺寸 |
| 64 × 64 | 资源管理器「超大图标」、部分对话框 | 可选 | 与 48 差别不大,可一起勾 |
| 128 × 128 | 高 DPI 屏幕、开始菜单磁贴 | 可选 | 缩放屏(125%、150%)下更清晰 |
| 256 × 256 | Win10/11 超大图标、应用商店、Alt+Tab | 建议 | Vista 起支持内嵌 PNG,体积可控 |
同样是「图标」,不同场景要的格式完全不一样。
| 格式 | 能装几个尺寸 | 用在哪 | 备注 |
|---|---|---|---|
| ICO | 多个(16~256) | Windows 桌面/任务栏、favicon | 系统按场景自动选尺寸,做网站图标首选 |
| PNG | 1 个 | 网页、App、文档配图 | 支持透明,现代浏览器 favicon 也吃 PNG |
| ICNS | 多个 | macOS 应用图标 | 苹果专用格式,本工具暂不支持 |
| SVG | 矢量,无限缩放 | 网页图标、UI 图标 | 不失真,但 Windows 桌面图标不认 |
⚠️ 免责声明:生成的 .ico 采用「内嵌 PNG」方式封装,需要 Windows Vista 及以上系统才能正常识别;Windows XP 及更早系统只认内嵌 BMP 的老式 ICO,请用专业软件另存。
图片会被重新采样缩放,小尺寸下的细节(细线、小字)可能变糊,建议源图用正方形、主体居中、尺寸 ≥ 256×256;如需保留透明,请使用 PNG 源图(JPEG 没有透明通道,透明区会被填白)。
所有处理均在你的浏览器本地完成,图片不会上传到任何服务器。
做网站要 favicon、做桌面快捷方式要 .ico、给程序加个图标也要 .ico——但 Photoshop、画图这些常用软件默认都存不了 ICO,装插件又麻烦。
这个工具就干一件事:把你的 PNG/JPG/WebP 变成标准 .ico 文件,而且一次能把 16、32、48、64、128、256 六种尺寸全塞进去。
为什么一个文件要装好几个尺寸?因为 ICO 不是「一张图」,而是一个「图片包」:它里面按目录结构存了多张不同尺寸的图,系统在不同场景会自己挑合适的那张——浏览器标签用 16×16,桌面用 32×32,资源管理器大图标用 48×48,缩放屏或者 Win10 的超大图标视图就会去取 256×256。只放一张 256 的图也能用,但缩到 16 的时候系统会自己硬拉小,效果通常比专门缩好的糊。
它的工作原理很简单:
① 把你的图读进 canvas(本地读取,不走网络);
② 按你勾选的每个尺寸分别缩放重绘,各自编码成 PNG;
③ 按 ICO 格式拼二进制:6 字节文件头(ICONDIR)+ 每个尺寸一个 16 字节目录项(ICONDIRENTRY)+ 后面依次排各张 PNG 的数据;
④ 打包成 Blob 让你下载。
几个用得上的小技巧:
· 源图尽量正方形,主体别贴边——小尺寸裁切时容易被切掉;
· 16×16 单独画一版:大图直接缩到 16 像素,细线条和小字基本会糊成一团,讲究的话手绘一个简化版;
· 透明用 PNG 源图:JPEG 不支持透明,透明区域会被填成白色;
· 做 favicon 勾 16 + 32 + 48 就完全够用,全勾上文件会大好几倍;
· 想要最小体积,只勾 16 和 32,通常能压到几 KB。
兼容性上有一句实话要讲清楚:本工具用「内嵌 PNG」方式封装(这是现在的主流做法,Windows Vista 之后都支持,还能保留透明和更小的体积);Windows XP 及更早的系统只认内嵌 BMP 的老式 ICO,那种得用专业图标软件另存。
最后:全程在你自己的浏览器里完成,图片不会上传到任何服务器,处理完关掉页面数据就没了。
怎么转:
① 读入图片到 canvas(本地 FileReader,不走网络);
② 对勾选的每个尺寸,按你选的缩放方式重绘:居中裁切(等比放大后裁中间,不变形)、完整缩放(等比缩到装得下,多余位置保持透明)、拉伸铺满(强制填满,会变形);
③ 每个尺寸单独 canvas 编码为 PNG(保留透明通道);
④ 按 ICO 规范拼装:ICONDIR 6 字节(reserved=0、type=1、count=尺寸数)+ 每个尺寸 16 字节的 ICONDIRENTRY(宽高各 1 字节,256 记 0;planes=1、bitCount=32、bytesInRes=该 PNG 字节数、imageOffset=数据偏移)+ 依次排列各 PNG 原始数据,全部用小端写入;
⑤ 生成 Blob 供下载,并列出每个尺寸各自占多大。
它不做:不生成 ICNS(macOS)、不生成 BMP 老式 ICO、不做图标美化与描边优化。
审核通过后就会展示在留言板上,稍安勿躁~
还没有留言,来抢沙发吧!