How to add a favicon to a Next.js static site?

Question

Create a /static folder in project root. This will be added to the static export folder.
Add favicon file in /static folder.
Add _document.js to /pages/ folder according to documentation (nextjs.org) or documentation (github.com).
Add <link rel="shortcut icon" href="https://stackoverflow.com/static/favicon.ico" /> to head.
npm run build && npm run export

P.S. Thanks to the previous answer that was deleted. It works!

Edit: Another way is to do this is to import Head into your root layout and add the link there. Anything added to Head gets inserted into the document head tag.

import Head from 'next/head';

const Page = (props) => (
  <div>
    <Head>
      <link rel="shortcut icon" href="https://stackoverflow.com/static/favicon.ico" />
    </Head>
    // Other layout/components
  </div>
);

export default Page;

Update :

The static directory has been deprecated in favor of the public directory. Doc

So, the code would now look like

import Head from 'next/head';

const Page = (props) => (
  <div>
    <Head>
      <link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico" />
    </Head>
    // Other layout/components
  </div>
);

Leave a Comment Cancel reply