Next.js 14+项目中更新默认Favicon.ico的问题求助

方法一：通过Metadata对象配置（官方推荐） #

在layout.js的metadata中添加icons字段，指定你的favicon路径，确保文件放在项目根目录的public文件夹下：

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by creating next app",
  icons: {
    icon: "/favicon.ico", // 路径对应public目录下的文件
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

方法二：直接在RootLayout中添加head标签 #

如果不想用Metadata，可以在html标签内直接插入head组件，添加favicon的link标签：

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* 确保favicon.ico在public目录下 */}
        <link rel="icon" href="/favicon.ico" sizes="any" />
      </head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

常见问题排查 #

• 缓存问题：浏览器会缓存旧的favicon，修改后按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存。
• 文件路径：必须把自定义favicon放在public根目录，引用路径直接写/文件名，Next.js会自动映射到public目录。
• 文件格式：如果用非.ico格式（比如SVG），需要调整link标签的type属性，例如：<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

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