修复不显示或不更新的 favicon

在 App Router 中，Next.js 会根据 app 目录里的文件来生成图标链接。文件名不对，它就什么都不输出。而 Pages Router 里根本没有这套约定。搞清楚你遇到的是哪一种，修复方法自然就清楚了。

文件变了，标签页没变。在 Next.js 上，那是三种缓存之一：浏览器的 favicon 存储、一个陈旧的 .next 构建，或一个在提供旧字节的 CDN。按这个顺序逐一排除。

React 渲染到一个 DOM 节点，从不碰 head，所以 favicon 存在于一个静态 HTML 文件里。标签页空白，说明那个文件里的 link 标签写错了，或者图标是从 src 导入的、不再位于固定路径上。

你换了文件，标签页却留着旧图标。在 React 应用里，那是浏览器在缓存 favicon，或者构建输出和 CDN 仍在从 public/ 提供之前那份副本。

Vite 会在构建时把 public/ 复制到输出根目录，并重写 index.html。一个在开发时正常、在生产环境 404 的 favicon，几乎总是路径里带了 public/ 这一段，或者是从 src 导入而被加了哈希。

Vue 单文件组件无法把 link 标签渲染进 head，所以 favicon 是在 index.html 里声明的：Vite 下是项目根目录，Vue CLI 下是在 public/ 内部。标签页空白，说明那个文件的标签写错了。

Angular 只有在构建配置告诉它时才会复制静态文件。一个没被 angular.json 里 assets 条目匹配到的图标永远进不了 dist。构建会成功，而文件不在那儿。

Astro 会把 public/ 原封不动地复制到输出，但从不替你注入图标标签。标签页空白意味着 link 不在你页面所用的 layout 里，或者某个页面渲染了自己的 html 元素、跳过了 layout。

WordPress 不会从你丢进主题里的文件提供 favicon。它从一个 Site Icon 设置输出图标标签，而标签页空白几乎总是意味着这个设置从未生效，或者有主题在与它对抗。

你设了一个新 Site Icon，旧的却不肯走。在 WordPress 上，那几乎总是某个缓存层（一个页面缓存插件或提供陈旧 HTML 的 CDN），浏览器自己的 favicon 缓存则是第二嫌疑。

在 Shopify 上，favicon 是一个主题设置，而不是服务器上的文件。主题会从你在编辑器里选的图片渲染一个图标 link，所以标签页空白意味着它没设置、你改错了主题，或者格式被拒绝了。

你选了一个新 favicon，线上店铺却仍显示旧的。在 Shopify 上，那几乎总是一个从没发布的草稿主题，或者图片 CDN 和浏览器在缓存之前那个图标。