图标生成
上传一张方形图片,一次性得到整套尺寸:16 / 32 / 48 / 64 / 128 / 180 / 192 / 256 / 512,外加一个装好了三档尺寸的 favicon.ico。全部在本地生成,图片不会上传。
—
生成结果
| 16 | 浏览器标签页(favicon.ico 内) | |
| 32 | 浏览器标签页 / 任务栏(favicon.ico 内) | |
| 48 | Windows 桌面快捷方式(favicon.ico 内) | |
| 64 | 浏览器书签栏 / 高 DPI 标签页 | |
| 128 | Chrome 网上应用店 / 高 DPI 桌面 | |
| 180 | iOS 主屏幕(apple-touch-icon) | |
| 192 | Android 主屏幕(manifest) | |
| 256 | Windows 磁贴 / 高 DPI 桌面 | |
| 512 | PWA 启动画面 / 应用商店 |
为什么是一整套,而不是一张
因为没有任何一个尺寸能同时满足所有地方。16 像素的标签页图标和 512 像素的 PWA 启动图,缩放关系是 32 倍 —— 一张图硬扛,小的会糊成一团、大的会发虚。所以行业惯例就是各给一张:小的手调到像素级,大的保留细节。这一页从一张原图等比生成,原图越接近 512 以上,大的那几张越清楚。
favicon.ico 是什么
它不是一个图片格式,而是一个容器:里面装着 16 / 32 / 48 三张 PNG,外加一张索引表。这是老系统和浏览器仍然最先去找的那个文件名,所以即使你已经有了 PNG 版,把 .ico 放在站点根目录仍然是最稳的做法。这一页生成的那个就是标准 PNG 内嵌格式,现代浏览器都认。
图标四周要留白
这一页不做任何内边距,原图怎么画就怎么缩。但你自己的原图应当留一圈安全区:Android 的自适应图标会按圆形或圆角方形裁切,macOS 和 iOS 也会自己加圆角。图形顶到边缘的图标,在这些地方会被切掉一块。经验值是四周各留 10%–15%。
常见问题
至少 512×512,而且最好是正方形。小于这个尺寸也能生成,但 512 那张是硬放大出来的,会明显发虚 —— 这一页会在页面上直接把这个提醒打出来,不会假装没有。
不会。 SVG 图标需要矢量原图,而这里拿到的是一张位图 —— 把位图"转成 SVG"只会得到一个里面嵌着位图的假矢量文件,体积更大、清晰度一点没变。真要矢量请用设计软件重画。
不会。 缩放和编码全在本页完成,没有网络请求。favicon.ico 也是在本地拼出来的。
把 favicon.ico 放到站点根目录;其余几张贴进项目,并在 <head> 里按用途引用:apple-touch-icon 用 180、manifest.json 用 192 与 512。文件名这一页已经按用途写好了。
