Favicon 网站图标生成
Favicon Generator
一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。
favicon 几年前就不再是一个文件了:一个站点需要根目录请求用的 .ico,标签栏用的三种尺寸的 PNG,因为 iOS 无视 manifest 而需要的 Apple 触控图标,以及因为 Android 会裁成它自选形状而需要的 maskable 图标。这个工具全部生成,加上 manifest 和要粘贴的标记。
把 logo 拖进来
512×512 或更大的方形 PNG 效果最好。SVG 需要先栅格化。
怎么用
拖入 512px 或更大的方形 logo
所有东西都由缩小得来,所以集合里最大的图标和你的起点一样好,不会更好。
设名称和短名称
短名称是主屏幕图标下面显示的,Android 和 iOS 都在十二个字符左右截断。
选主题色和启动色
它们进 manifest:主题色在 Android 上给浏览器界面着色,背景色是 PWA 启动后绘制之前显示的颜色。
拿 zip 并粘贴标记
文件放在站点根目录;`<link>` 块放进 `<head>`。两者一起生成,所以路径是一致的。
常见问题
maskable 图标是干什么的?
Android 把主屏幕图标裁成设备自选的形状——圆形、圆角方形、水滴形——只保证中央 80%。maskable 图标不管你的边距设置如何总是留 10% 边距,所以裁剪碰不到图案。
能改用 SVG favicon 吗?
可以加一个,在支持的地方它是最好的选择——但它替代不了这个集合。iOS 上的 Safari 要触控图标,Android 要 manifest 图标,根目录的 .ico 不管怎样都会被请求。先把 SVG 栅格化,把 PNG 拖到这里。
边距该留多少?
设计成填满画框的标志不留;16px 下需要呼吸空间的文字标志留百分之十到十五。标签栏尺寸是边距代价最大的地方,因为能让出的空间太少了。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
ICO 图标转换
ICO Converter
把图片打包成含多种分辨率的 .ico,也能把现成 .ico 里的图片拆出来。
图片尺寸调整
Image Resizer
按像素、百分比或最长边缩放,可锁定宽高比并批量套用预设。
PNG 压缩
PNG Compressor
量化调色板并重写 deflate 数据流,在不改变尺寸的前提下减小 PNG 体积。
SVG 优化压缩
SVG Optimiser
清掉编辑器留下的冗余、合并变换、缩减路径精度,并把渲染结果并排对比。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景,输出透明 PNG,并可用画笔修补边缘。
EXIF 信息清除
EXIF Remover
删掉照片里的相机、GPS 和编辑记录等元数据,像素本身分毫不动。