How to add favicon in Next.js

Last updated on May 20, 2021 by Suraj Sharma

In this tutorial, you’ll learn how you can add a favicon (.ico) image or a shortcut icon to your Next.js application

Generate a favicon

Skip this section If you have already generated a favicon.

You can generate a favicon from a .png or a .gpg file using any online favicon generator websites, like

Add the favicon to your Next application

First, place the favicon inside the /public folder and then add the following code in your /pages/_document.ts file.

return (
  <html lang="en">
        <link rel="shortcut icon" href="/favicon.ico" />

Related Solutions

Rate this post

Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.