Next.js 14中SVG无法作为Favicon使用的问题求助

核心问题排查 #

你的代码混用了App Router（export const metadata）和Pages Router（_document.tsx）的语法，加上静态资源位置可能错误，导致浏览器仍默认请求favicon.ico并出现404。

分步解决 #

1. 确认静态资源位置 #

将favicon.svg放在项目根目录的public文件夹下，不要放在app文件夹内。public是Next.js的静态资源根目录，根路径/favicon.svg会直接指向该文件。

2. 修正_document.tsx代码（Pages Router场景） #

如果使用Pages Router（_document.tsx位于pages目录下），export const metadata在此处无效，直接在<Head>中明确指定SVG的MIME类型：

import { Html, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang='ru'>
      <Head>
        {/* 指定SVG类型，让浏览器正确识别 */}
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        {/* 可选：添加备用ico文件，彻底消除404 */}
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
        <meta name='apple-mobile-web-app-status-bar-style' content='#ff7652' />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

3. App Router场景的正确配置（若使用App Router） #

如果项目是App Router结构，无需通过_document.tsx配置favicon，直接在app/layout.tsx中设置metadata：

export const metadata = {
  icons: {
    icon: {
      url: '/favicon.svg',
      type: 'image/svg+xml',
    },
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ru">
      <body>{children}</body>
    </html>
  )
}

4. 彻底解决favicon.ico 404问题 #

浏览器会默认请求/favicon.ico，即使设置了SVG也会触发该请求，可通过以下方式处理：

• 在public文件夹中放入一个空白的favicon.ico文件（生成1x1像素的空白ico即可）
• 若使用服务器部署，可通过配置将/favicon.ico请求重定向到/favicon.svg

5. 缓存清理 #

修改后重启Next.js开发服务器，再通过Ctrl+Shift+R强制刷新浏览器页面，清除旧缓存的影响。

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