DEV Community

Cover image for How to add favicon to a Next.js site?
collegewap
collegewap

Posted on • Originally published at codingdeft.com

How to add favicon to a Next.js site?

You might have seen the following default favicon in your Next.js site and want to change it.

default icon

In this article, we will see how to do the same.

Creating a favicon

You can use sites like https://favicon.io/favicon-generator/ to generate a favicon.

It will generate the favicon of different sizes and also you can generate icons for adding your website to the home screen on mobile devices.

Now download the generated favicon and place the files in the public folder:

favicon in public directory

It is not necessary to have all the files. To add favicon, the favicon.ico file is sufficient

Including the favicon

You can include the favicon file along with manifest files in the _document.js file as shown below:



import { Html, Head, Main, NextScript } from "next/document"

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}


Enter fullscreen mode Exit fullscreen mode

If you want to just add the favicon and not the manifest file, the above step is not required,
all you need to do is replace the favicon.ico in the public directory with the one you want and the browser will use it automatically.

If you reload the page now, you should be able to see the favicon loaded:

new icon

You can load favicon from other sites as well like shown below:



<link
  rel="icon"
  type="image/png"
  href="https://www.codingdeft.com/favicon.ico"
/>


Enter fullscreen mode Exit fullscreen mode

Top comments (0)