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

kernel_kate

I'm trying to add a favicon to a Next.js static site without much luck. I've tried customising the document with components from 'next/document' https://nextjs.org/docs/#custom-document A straight link to the favicon.ico file doesn't work because the file isn't included in the build and the href doesn't update to /_next/static/... Importing the image and adding to the link's href doesn't work either (see commented out lines). import React from...

Originally asked by Advait Junnarkar on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

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="/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="/static/favicon.ico" /> </Head> // Other...

Full answer by Advait Junnarkar: https://stackoverflow.stackexchange.com/a/56267816 (CC BY-SA 4.0).

Need it done for your business? UphillTech.