关于 favicon 的笔记

指南 · 3 分钟阅读

为什么你的 favicon 不更新——以及如何强制更新它

你换了 favicon、部署了、刷新了——旧的却还在那里。这是关于 favicon 最常见的抱怨，而且几乎从来不是代码问题。浏览器对 favicon 的缓存远比对页面或图像更激进，而且 favicon 缓存往往能挺过一次普通刷新。

按这个顺序逐步排查：

• 强制刷新。Ctrl+Shift+R（Windows）或 Cmd+Shift+R（Mac）会绕过页面缓存重新加载。
• 重新打开标签页。favicon 缓存常常与打开的标签页绑定。彻底关闭它，再打开一个新的。
• 用查询参数破除缓存。测试时把链接指向一个“新”URL：<link rel="icon" href="/favicon.ico?v=2">。每次改动就把数字加一。
• 确认文件确实存在。直接加载 yourdomain.com/favicon.ico——如果返回 404，说明浏览器正在为一个已不存在的文件显示缓存图标。

Google 搜索则是另一回事。它会将你的 favicon 与页面分开缓存，并按 Google 自己的节奏刷新，因此即便你的网站已经正确，搜索结果中的新图标仍可能滞后几天或几周。没有什么按钮能加速这个过程——确保 /favicon.ico 向 Googlebot 返回 200，然后耐心等待。

观点 · 4 分钟阅读

别再生成 20 个 favicon 文件了——2026 年的最小文件集

许多 favicon 工具至今仍会塞给你一个 ZIP，里面有十六个 PNG、一个 browserconfig.xml 和 Microsoft 磁贴图像。这几乎全是累赘。Windows 磁贴随着 Live Tiles 界面一起退役了；那一堆中间尺寸的 PNG 所解决的浏览器问题早已不复存在。

以下这组文件涵盖了今天所有仍在使用的场景：

• favicon.ico —— 多尺寸（16/32/48），面向老旧浏览器和 Google 搜索。
• icon.svg —— 一个可缩放的文件，现代浏览器更青睐它，并支持深色模式。
• apple-touch-icon.png —— 180×180，用于 iOS 主屏幕。
• android-chrome-192 和 -512 PNG —— 由你的 web app manifest 引用，用于 Android 和 PWA。

五个文件，四处 <link>/manifest 引用，搞定。文件更少意味着需要同步的东西更少、部署更轻，也不会有过时的 browserconfig.xml 指向你已删除的图像。如果某个工具坚持说你需要二十个，那它优化的是“看起来很周全”，而不是浏览器实际会请求什么。

技巧 · 3 分钟阅读

SVG favicon 与深色模式：一个会自适应的图标

深色 logo 在浅色标签栏上很清晰，在深色标签栏上却几乎消失。提供两个文件再来回切换很麻烦。有了 SVG favicon，你可以让单个文件响应浏览器主题，因为浏览器在渲染图标时会应用 SVG 内部的 CSS。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

用 <link rel="icon" href="/icon.svg" type="image/svg+xml"> 引用它，并保留一个普通的 favicon.ico 作为回退——老旧浏览器和 Google 搜索不会执行媒体查询，因此它们也需要一个静态图标。结果就是：在浅色系统上图形是深色的，在深色系统上它会翻转为浅色，全部来自一个小文件。