如何在Next.js（React 18）项目中添加Favicon？资源未找到问题

核心问题：静态资源目录位置错误 #

你把favicon资源放在了root/packages/src/public，但Next.js默认只会识别项目根目录下的public文件夹作为静态资源存放目录，这导致浏览器找不到资源。

具体修复步骤 #

1. 调整资源存放位置 #

• 普通Next.js项目：将所有favicon相关文件（apple-touch-icon.png、favicon-32x32.png、site.webmanifest等）移到项目根目录的public文件夹（没有的话直接创建该文件夹）。
• monorepo结构（项目在root/packages/[你的Next.js子项目名]）：将资源移到root/packages/[你的Next.js子项目名]/public，确保public属于当前Next.js子项目的根目录。

2. 验证资源可访问性 #

启动项目后，直接在浏览器地址栏访问 http://localhost:3000/favicon-32x32.png，如果能正常显示图片，说明路径配置正确；如果404，继续检查资源是否放在了正确的public目录下。

3. 保持或优化代码配置 #

你基于Pages Router使用_document.tsx的方式是可行的，无需大幅修改：

• 继续使用Favicon组件：确保组件内的href路径都是根路径形式（比如/favicon-32x32.png），无需额外前缀。
• 也可以直接把favicon的link标签写入_document.tsx的Head中，省去组件：

// _document.tsx
import * as React from "react"
import { ColorModeScript } from "@chakra-ui/react"
import Document, { Head, Html, Main, NextScript } from "next/document"

export default class AppDocument extends Document {
  static getInitialProps(ctx: any) {
    return Document.getInitialProps(ctx)
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" key="theme-color" content="#000000" />
          <meta name="description" content="name" key="description" />
          <meta property="og:title" content="title goes here" key="title" />
          <meta property="og:description" content="description goes here" key="og:description" />
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com"  />
          
          {/* 直接写入favicon相关标签 */}
          <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
          <link rel="manifest" href="/site.webmanifest" />
          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
          <meta name="msapplication-TileColor" content="#da532c" />
          <meta name="theme-color" content="#ffffff" />
        </Head>
        <body>
         <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

4. 清除浏览器缓存 #

浏览器会缓存旧的favicon资源，修改后建议：

• 使用浏览器的隐私模式打开页面测试
• 手动清除缓存（快捷键：Ctrl+Shift+R / Cmd+Shift+R）

内容的提问来源于stack exchange，提问作者Mel