Why is my favicon not working in my next js app

Question

Can i know Why is my favicon not working in my next js app?

score 0 · Answer 1 · Apr 3

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} />

    </>

  );

}