Next.js favicon 不显示？这样修复
在 App Router 中，Next.js 会根据 app 目录里的文件来生成图标链接。文件名不对，它就什么都不输出。而 Pages Router 里根本没有这套约定。搞清楚你遇到的是哪一种，修复方法自然就清楚了。
你用的是哪个 Router？
App Router 会读取 app 目录中名为 favicon.ico、icon 和 apple-icon 的文件，算出它们的尺寸，并在构建时注入 link 标签。如果文件名写错或放错了文件夹，就不会输出任何标签。没有报错，只有一个空白的标签页。
Pages Router 没有这样的约定。除非你把文件放进 public 目录，并在自定义 head 里自己声明 link 标签，否则什么都不会出现。一个在两者之间迁移到一半的项目，正是 favicon 在某个路由能显示、在另一个路由却不显示的经典原因。
文件必须放在哪里
| 文件 | Router | Next.js 的处理方式 |
|---|---|---|
| app/favicon.ico | App Router | 以 /favicon.ico 提供，自动注入标签 |
| app/icon.png | App Router | 构建时自动计算尺寸并生成链接 |
| public/favicon.ico | Pages Router | 仅当你手动添加 link 标签时才会出现 |
三十秒确认问题所在
- 1
直接打开图标 URL
在新标签页里加载 /favicon.ico（或 /icon）。出现 404 说明文件不在 Next 预期的位置：这是构建问题，不是缓存问题。
- 2
查看源代码，搜索 rel="icon"
head 里没有图标 link，说明文件约定从未触发。检查文件名是否完全一致：favicon.ico、icon.png、apple-icon.png。
- 3
最后才排查缓存
只有在文件能正常解析、标签也确实存在之后，才该在无痕窗口里强制刷新。十有八九，问题都出在缓存之前的环节。
Next.js favicon 不显示：常见问题
为什么我的 Next.js favicon 不显示？
在 App Router 中，是因为文件名写错或没放在 app 目录里，所以没有生成 link 标签。在 Pages Router 中，是因为没有自动约定，而你又没在自定义 head 里添加标签。直接打开 /favicon.ico，出现 404 就确认是文件或放置位置的问题。
已经有了 app/icon.png，还需要 favicon.ico 吗？
两个都保留。icon.png 以更高质量覆盖现代浏览器；favicon.ico 则是老旧浏览器、feed 阅读器和一些链接预览爬虫仍会按路径请求的文件。
为什么 favicon 在某个页面显示、在另一个页面却不显示？
通常是项目混用了 App Router 和 Pages Router。app 目录约定只覆盖由它渲染的路由；Pages Router 的路由需要在 _document 或自定义 head 里放自己的 link 标签。