If your favicon isn’t working in your Next.js app, here are the reasons and fixes:
Incorrect File Path:
Issue: Next.js expects the favicon at /public/favicon.ico by default. If it’s missing or misplaced (e.g., in /assets instead of /public), it won’t load.
Fix: Place favicon.ico directly in the /public folder. No need to import it; Next.js serves it automatically.
Wrong File Name or Extension:
Issue: The default favicon must be named favicon.ico. Other names (e.g., icon.png) or formats might not work without explicit configuration.
Fix: Rename your file to favicon.ico or configure it in next.config.js:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.(png|jpg|svg)$/,
type: 'asset/resource',
});
return config;
},
};
Then use <link rel="icon" href="/custom-icon.png" /> in your <Head>.
Missing or Incorrect <Head> Tag:
Issue: If you’re overriding the favicon with a custom one in a page’s <Head> (e.g., pages/_app.js or a specific page), a typo or wrong path (e.g., href="/public/favicon.ico") will break it. The /public prefix isn’t needed in href.
Fix: Add or correct it in pages/_app.js or a page:
import Head from 'next/head';
export default function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</>
);
}
