在Firebase部署的Next.js应用中设置自定义favicon.ico的正确方法

针对你遇到的图标不更新问题，按以下步骤操作即可解决：

1. 按Next.js版本放置文件并配置 #

• Next.js 13+（App Router）：将自定义favicon.ico直接放在项目根目录的app/文件夹下。可以在app/layout.tsx中显式添加图标引用（可选，但能避免识别问题）：

  import type { Metadata } from 'next';
  
  export const metadata: Metadata = {
    icons: {
      icon: '/favicon.ico',
    },
  };
  

• Next.js 12及以下（Pages Router）：把favicon.ico放在public/目录下，然后在pages/_document.tsx中添加link标签：

  import { Html, Head, Main, NextScript } from 'next/document';
  
  export default function Document() {
    return (
      <Html>
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
  

2. 清理缓存（核心解决步骤） #

• 本地开发：重启Next.js开发服务器，同时清空浏览器缓存（快捷键Ctrl+Shift+Delete），或用无痕模式测试，避免浏览器读取本地缓存的旧图标。
• Firebase部署后：Firebase Hosting默认会缓存静态资源，可通过两种方式处理：
  1. 强制刷新部署：执行firebase deploy --only hosting重新部署，确保新图标被上传。
  2. 配置缓存规则：在firebase.json中添加针对favicon.ico的短缓存配置，避免长期缓存旧文件：

     {
       "hosting": {
         "headers": [
           {
             "source": "/favicon.ico",
             "headers": [
               {
                 "key": "Cache-Control",
                 "value": "public, max-age=300"
               }
             ]
           }
         ]
       }
     }
     

3. 检查文件与路径正确性 #

• 确保文件名是全小写的favicon.ico，服务器路径区分大小写，大小写错误会导致无法识别。
• 确认文件放置目录正确，没有误放到其他文件夹中。

4. 验证部署结果 #

部署完成后，直接访问https://你的Firebase域名/favicon.ico，如果能下载到新的图标文件，说明部署成功；若仍为旧图标，检查.gitignore或firebase.json的忽略规则，确认没有排除favicon.ico文件。

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