一套 favicon 到底要切多少个尺寸

🍀 起因#

换了站点 logo 之后，浏览器标签上还是那个旧图标。换了文件、清了缓存，还是旧的。

后来才明白：favicon 不是一张图，是一组图。

📐 到底要哪些#

最常见的几个：

• 32×32 —— 浏览器标签页、书签栏
• 180×180 —— iOS 加到主屏幕（Apple Touch Icon）
• 192×192 / 512×512 —— Android 主屏、PWA 安装
• 16×16 —— 老式书签，现在用得少了

如果还要考虑 Windows 磁贴、Safari 固定标签，尺寸还能再翻倍。

对个人博客来说，32、180、192 三个尺寸基本够用。

🌓 亮色和暗色#

还有一个容易忽略的点：暗色模式下图标可能看不清。

深色底上放深色图标，等于没有。所以最好准备两套：

• 亮色模式：深色图标（深青绿）
• 暗色模式：浅色图标（浅薄荷）

在 HTML 里用 media="(prefers-color-scheme: dark)" 区分，浏览器会自动切。

🧹 缓存这个老六#

改完 favicon 之后，浏览器大概率还是显示旧的。

不是你没改对，是它缓存了。强制刷新（Ctrl+Shift+R），或者开个无痕窗口看，基本就好了。别人访问则是新的——只有你自己的浏览器在跟你作对。

✂️ 我的做法#

用脚本把一张 1024 的源图批量缩放导出，一次生成十来张，打包丢进 public/favicon/，省得手动一张张切。