网站图标与 Web 应用清单
放进一张图，出来一整套：货真价实的多尺寸 ICO、按苹果要求压平的 Apple touch 图标、清单用的 PNG、清单文件本身，以及可直接粘贴的 HTML 片段。它还会在安卓的 maskable 裁切咬下来之前先给你看一眼——大多数图标正是在那里悄悄丢掉了边缘。
这个圆就是安卓可能裁到的范围。圆外的部分在某些设备上会被切掉。
| 文件 | 尺寸 | 谁在用 |
|---|
为什么 .ico 依然重要
对多数浏览器来说，一张 PNG 就够了；如果你只需要一个标签页图标，到此为止也无妨。ICO 之所以还有位置，是因为它把好几档分辨率装在同一个文件里，由操作系统去挑合适的那一档：标签页取 16，固定的快捷方式或桌面链接取 32 或 48，而每一档都是按那个尺寸单独绘制的位图，而不是临时从大图压下来的。这里生成的文件，就是一个带小段文件头的 PNG 容器，本世纪出的浏览器都读得懂。
maskable 安全区
安卓并不保证把你的图标显示成方形。视启动器而定，它可能裁成圆形、圆角方形，或者介于两者之间的形状；你能拿到的保证只有内圈那个圆——宽度的百分之八十，居中。画面铺到边的图，正是会丢掉边的图。办法是给清单图标加上留白，把画面收进安全区，这里的预览会把裁切线画出来，让你比用户先看到它。
为什么 Apple touch 图标不带透明
iOS 会把主屏幕图标合成到它自己的圆角形状上，而对 alpha 通道的处理并不像你期待的那样：透明的地方会变成黑色。所以这一个文件在编码前会被压平到你选的背景色上，而清单里的 PNG 保留 alpha——那边对它的处理是正确的。
这些文件该放哪里
把它们放在站点根目录，不要放进 assets 文件夹——浏览器和爬虫会去猜网站图标的路径，有些不管你有没有写链接都会去取。然后把 HTML 片段粘进页面的 head 里。只有清单那一行的路径，需要跟你实际放置文件的位置对上。
常见问题解答
已经有 PNG 了，还需要 favicon.ico 吗？
严格来说，不需要。实际上，需要——大量爬虫、订阅阅读器和老工具是按路径去要网站图标的，根本不看你的标记。代价不过几 KB。
我的图标在 16 像素下糊成一团，怎么办？
这里没什么能救它，因为地方根本不够。那个尺寸下，一个标记横向只有十来个可辨认的像素，带字的标志一定会糊成一团。把简化版——一个形状、一个字母——作为源图交进来，完整的组合标志留给别处用。
要不要关掉 maskable 留白？
只有当你的图形本来就留着足够宽的边距时才关。如果它铺满了画框，就开着，不然安卓会切进去。
我的图片会被上传吗？
不会。每一个尺寸都是在本页的画布上绘制的，压缩包也在内存里组装。什么都不会外发。