Next.js动态路由页面Favicon无法正常显示问题求助

问题原因 #

你当前用的是相对路径images/logos/tab_icon.ico，动态页面（如/folder/[id]）的路由层级比静态页面深，浏览器会从当前页面的路由路径下去找图标，也就是请求/folder/images/logos/tab_icon.ico，但你的图标实际存放在根目录的public文件夹下，所以找不到资源。

修复方法 #

把<link>标签里的href改成绝对路径（开头加斜杠），让浏览器从网站根目录去请求图标：

修改后的_document.js代码：

import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from '@chakra-ui/react'

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          {/* 改为绝对路径 */}
          <link rel="icon" href="/images/logos/tab_icon.ico" />
        </Head>
        <body>
          <ColorModeScript />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

补充说明 #

Next.js 中，public文件夹下的静态资源必须通过绝对路径访问，不管当前页面在哪个路由层级，以/开头的路径都会直接指向public目录，这样所有页面（包括动态路由页面）都能正确加载到Favicon。

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