关于Favicon 网站图标生成
Favicon 网站图标生成，把一个 Logo 变成整套网站图标，而且按浏览器和手机的规矩来做。iPhone 会把主屏幕图标的透明部分显示成黑色，所以 apple-touch-icon 一律用背景色铺底，Logo 四周留出空白；安卓会把图标裁成圆形或圆角方形，所以另外生成 512 像素的 maskable 图标，Logo 放在安全区内，不会被切掉。小尺寸都做了锐化，16 像素的图标边缘也清楚；ZIP 旁边还有一张预览图，能看到图标在浅色、深色浏览器标签页里的样子，以及做成 iPhone、安卓图标的效果。网站用图还要压缩、改尺寸的话，工具都在图片处理里。
ZIP 里有 favicon.ico（内含 16、32、48 像素），16、32、48、96 像素的 PNG（Google 搜索结果里的网站图标按 48 像素的倍数显示），180 像素的 apple-touch-icon，安卓用的 192 和 512 像素图标，以及 site.webmanifest 和 head.html。上传的是 SVG 的话，还会附上 favicon.svg，给支持它的浏览器用。填写的“网站名称”会写进清单文件，“更多选项”里的“主题色”会写进清单文件和 head.html；head.html 里的代码粘贴进网页的 head 部分就行，所有文件放在网站根目录。长方形的 Logo 会居中放进正方形画布，不会被裁掉，“图标四周留白”可以在 0 到 30% 之间调。
Favicon 网站图标生成怎么用
- 1上传 Logo
选择或拖入正方形的 PNG、JPG、WebP 或 SVG，最好 512 像素以上。
- 2设置背景和名称
保持“透明背景”，或取消勾选后设“背景色（不透明时使用）”，再填上“网站名称”。
- 3生成图标
点“Favicon 网站图标生成”按钮，先看一眼预览图，再下载整套图标。
- 4放到网站上
把 favicon-package.zip 解压到网站根目录，把 head.html 里的代码粘贴到每个页面的 head 部分。
为什么用熊仔工匠
- 手机上不出错
苹果图标不透明、不发黑，安卓 maskable 图标不被裁切，16 像素也清楚。
- 整套图标
ICO、16 到 96 像素的 PNG、苹果触摸图标、安卓 192 和 512 图标，上传 SVG 还附 favicon.svg。
- 清单和代码已填好
网站名称、主题色已写进 site.webmanifest，head.html 里的代码（含主题色）复制粘贴即可。
- 先看预览
一张图看清图标在浅色、深色标签页里，以及做成 iPhone、安卓图标的效果。