网站图标 favicon 怎么做？ICO 多尺寸、PNG 与移动端图标规范

favicon 是网站最容易做错又最影响观感的小细节：标签页里一个白块、收藏夹里一张模糊的方块、加到手机桌面后图标被裁掉一圈。

一、ICO 里要装几个尺寸

传统做法是一个 ICO 文件里打包 16×16、32×32、48×48 三档。现在加两档更稳：64×64 用于高 DPI 屏、256×256 用于 Windows 大图标视图。用 图片转 ICO 上传一张 512×512 的 PNG，工具会自动生成多尺寸 ICO，一次到位。

二、尺寸越多，文件越小越好吗

不是。ICO 内嵌 PNG 压缩后各尺寸总和通常在 20~60KB，超过 100KB 就是没优化。浏览器只在需要时读取对应尺寸，所以多几档不会变慢，但每档都塞未压缩位图会明显变胖。

三、现代网站要提供的四件套

• favicon.ico 放根目录（老浏览器与 RSS 阅读器会直接请求这个路径）；
• favicon.svg 用于现代浏览器，矢量不失真，支持深色模式切换；
• apple-touch-icon.png 180×180，iOS 加到桌面用，不要带圆角，系统会自己裁；
• og-cover.png 1200×630 用于社交分享预览，和 favicon 是两回事。

四、为什么显示了白块

最常见的原因是图标本身是白色或浅色、没有背景色，在白色标签栏里就看不见了。解决办法：给图标加一个深色或品牌色底，或者做成实心图形。缩到 16×16 后还能认出来，才算合格——先在 16px 下看，再决定细节。

五、深色模式的适配

SVG 图标里可以用 prefers-color-scheme 媒体查询切换填充色：

<style>
  @media (prefers-color-scheme: dark) {
    .bg { fill: #0b1220; }
  }
</style>

这样在深色标签栏里也不会变成一个糊掉的深色块。

六、改完不生效怎么办

favicon 的缓存极其顽固，浏览器、CDN、系统图标缓存各存一份。改完先在无痕窗口验证，再考虑换文件名（如 favicon-v2.ico）并同步更新 HTML 里的引用。