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 [favicon.io](https://favicon.io/favicon-converter/)

 

## 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.

 

```jsx
return (
 <html lang="en">
 <Head>
 <link rel="shortcut icon" href="/favicon.ico" />
 </Head>
 <body>
 </body>
 </html>
)
```

 
 

**Related Solutions**

- [How to add google analytics to a Next.js website](/blog/google-analytics-nextjs-website)

- [How to do a 301 server side redirect in Next.js](/blog/nextjs-server-side-redirect)

- [How to customize 404 error page in Next.js](/blog/nextjs-custom-404-page)

- [How to get the pathname from the current URL in React](/blog/current-url-in-react)

- [How to set a background image from the public folder in React](/blog/background-image-in-react)

Suraj Sharma

How to add favicon in Next.js

Generate a favicon

Add the favicon to your Next application