I have the following _documents.js file
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>
)
}
}
Favicon is renamed to tab_icon.ico
All my static pages are correctly showing the icon in the tabs. However for the dynamiclly routed pages it is not showing. I am using getStaticProps with getStaticPaths.
Here is the dynamic page structure
- index.js
- /folder
- /folder/[id].js
My NextJS version is Next.js v12.1.0
>Solution :
Check your link path to your icon. It seems you did not write the / as the first character. As you know in Next.js to get access to files that are located in the public folder you should start your path with the / slash.
<link rel="icon" href='/images/logo/tab_icon.ico' />