Menu
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 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; // import favicon from '../data/imageExports'; export default class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); return { ...initialProps }; } render() { return ( <Html> <Head> {/* <link rel="shortcut icon" href={favicon} /> */} <link rel="shortcut icon" href="../images/icons/favicon.ico" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); } } The favicon links get added however it doesn't display. I'd expect it to work when I import the file, but it just adds a <link rel="shortcut icon" href="[object Object]"> link.
Has anyone done this yet?
940
Simply add your favicon. ico in public folder, Next js will automatically take that favicon for all pages. No need to add any favicon link to any pages or in tag no need to add link for favicon.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
/static folder in project root. This will be added to the static export folder./static folder._document.js to /pages/ folder according to documentation (nextjs.org) or documentation (github.com).<link rel="shortcut icon" href="/static/favicon.ico" /> to head.npm run build && npm run exportP.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 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="/favicon.ico" /> </Head> // Other layout/components </div> ); The accepted answer is nice, but might be worth pointing out that you don't have to modify _document.js for adding a favicon (nor for adding any tags to head).
I found out for myself that placing favicon in _app.js makes more sense. This file is most likely to exist already for setting up a layout for the pages or something like this. And you can add Head tag literally anywhere (see the docs)
So I ended up with _app.js
class MyApp extends App { render() { const { Component, pageProps } = this.props; return ( <Layout> <Head> <link rel="shortcut icon" href="/favicon.ico" /> </Head> <Component {...pageProps} /> </Layout> ); } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
