NextJS 13.2自定义Favicon被默认图标覆盖，如何禁用默认图标？

我的图标位于/public/favicon.ico，在Layout.jsx中配置了如下代码：

export const metadata = {
  icons: {
    icon: '/favicon.ico',
  }
}

路径正确且能正常渲染，但默认图标仍覆盖了自定义图标，页面渲染出如下标签：

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/_next/static/media/metadata/favicon.603d046c.ico" type="image/x-icon" sizes="any">

请问如何让NextJS不使用默认图标？

解决方案 #

方法1：删除默认图标文件 #

NextJS 13.2会自动识别项目中的默认图标文件，你需要：

• 检查app根目录下是否存在默认的favicon.ico，若有直接删除
• 检查public目录内是否有NextJS初始化时自带的图标文件（命名多为favicon.*），删除这些文件后重新构建项目

方法2：完整配置icons元数据 #

在metadata的icons字段中添加完整的图标参数，明确覆盖默认配置，让自定义图标优先级更高：

export const metadata = {
  icons: {
    icon: [
      {
        url: '/favicon.ico',
        type: 'image/x-icon',
        sizes: 'any'
      }
    ]
  }
}

配置完成后，NextJS会使用你指定的图标配置，不再插入默认的图标标签。

方法3：清除缓存后重新构建 #

缓存可能导致默认图标残留，执行以下命令清除缓存并重新构建：

# 清除NextJS缓存
rm -rf .next
# 重新构建并启动项目
npm run build
npm run start

Windows系统可使用rd /s /q .next替代rm -rf .next

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