网站图标不是一张图。它是浏览器标签页上的小图标，是把站点添加到主屏幕时手机使用的大图标，还是 PWA 清单和应用切换器期待的更大图标。每种场合要的尺寸都不同，错一个就看得出来：把 16 像素的图标拉满主屏幕磁贴，坏得连访客都会注意到。
这个生成器用一张图做出全套。它把源图居中裁成正方形，用 pica 重采样器而不是浏览器默认滤镜缩放到各个尺寸（在 16 像素这个级别差别是决定性的——粗糙的缩放会把标志变成一团糊），再连同一个真正的多分辨率 .ico 文件一起打包成 ZIP。
图标在浏览器内生成。未发布的标志和品牌资产不会被上传到任何图标服务。
<head> 里。| 文件 | 尺寸 | 用于 |
|---|---|---|
| favicon.ico | 16、32、48 合一 | 浏览器标签页、书签、旧环境兼容 |
| favicon-16x16.png | 16 × 16 | 标准密度屏幕的标签页图标 |
| favicon-32x32.png | 32 × 32 | 高密度屏幕的标签页图标 |
| favicon-48x48.png | 48 × 48 | Windows 站点快捷方式 |
| apple-touch-icon.png | 180 × 180 | iOS 主屏幕 |
| icon-512.png | 512 × 512 | Android 主屏幕、PWA 清单、应用切换器 |
这个 .ico 是装着 16、32、48 像素版本的真正多分辨率容器，而不是改了扩展名的 PNG。Windows 和旧浏览器会按绘制场合自动挑选合适的尺寸。
把 ZIP 解压到站点根目录，并在每个页面的 <head> 中加入：
| 用途 | 标签 |
|---|---|
| 经典网站图标 | <link rel='icon' href='/favicon.ico' sizes='any'> |
| 标准密度 | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| 高密度 | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| iOS 主屏幕 | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
512 像素的图标由 Web 应用清单引用，而不是通过 link 标签。
网站图标常常以 16 像素见方显示，那大约是一个正文字符的大小。完整的文字标记在这个尺度下无法辨认，细节丰富的插画会变成噪点。
行得通的是一个字、一个简单的字母组合，或者一个在明暗标签背景下都对比强烈的粗壮图形。把标志缩到 16 像素，退到一臂远看看——如果你都认不出是什么，别人也认不出。
至少 512 × 512，最好是正方形。源图会被居中裁成正方形，因此横向的标志两端会被切掉。如果这是个问题，请先用制作正方形工具补白。
是。它是装着 16、32、48 像素图像的真正多分辨率 ICO 容器，不是改了扩展名的 PNG。Windows 和旧浏览器能正确读取。
放在网站的根目录，使其可通过 /favicon.ico 之类的路径访问，然后把上面的 link 标签加到页面里。
因为浏览器对网站图标缓存得非常激进。请强制刷新，或直接用 URL 打开图标文件确认已正常提供，然后再刷新页面。
PNG 文件会保留 alpha 通道。但请注意，透明图标需要在明亮和深色两种标签背景下都成立。
不会。裁切、缩放和 ICO 组装全部在浏览器内完成。