favicon 早在多年前就不再只是一个 16 像素的小方块。如今一个站点要为标签页、Windows 快捷方式、iPhone 主屏幕和安卓安装提示准备好几种尺寸，外加指向它们的标记。这个页面用一张图，在你的浏览器里把这些全做出来。

使用方法

1. 1 拖入一张方形图片，最好 512 px 或更大。
2. 2 在预览里逐个尺寸看一遍，如果你的图有透明就设个底色。
3. 3 下载 zip，解压到网站根目录，再把 HTML 贴上去。

为 16 像素而设计，不是为 logo

在标签页那个尺寸上，favicon 大约就是本页一个句号的宽度。文字标会糊成一团灰，细线则彻底消失。能在这个尺度上活下来的，是一个字母、一个简单形状，或者 logo 里最有辨识度的那一小块；整个 logo 几乎从来活不下来。

PNG 就够了，ICO 只是遗留

今天还在用的浏览器都能读 PNG favicon，所以一叠 PNG 文件加上正确的 link 标签就足以覆盖整个 web。.ico 这个容器之所以存在，是因为当年 Internet Explorer 会去网站根目录找它；除非你必须照顾某个上古环境，否则可以跳过。

透明在手机上的表现不一样

在浏览器标签页里，透明图标会很自然地落在主题给的底色上。而在 iPhone 主屏幕上，同一个文件背后会出现一块实心黑方块，因为 iOS 在那里不合成透明。设一个背景色，图标在两边看起来就都是有意为之。

为什么浏览器还在显示旧图标

favicon 被缓存得又狠又久，有时连普通刷新都跨不过去。先直接打开图标文件，确认新的确实在那儿，再用无痕窗口看一遍。改文件名，或者给它加个版本号，才是逼出更新的可靠办法。