Skip to content

How to add favicon to a Next.js site?

Apr 16, 2023Abhishek EH2 Min Read
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 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:

1import { Html, Head, Main, NextScript } from "next/document"
3export default function Document() {
4 return (
5 <Html lang="en">
6 <Head>
7 <link
8 rel="apple-touch-icon"
9 sizes="180x180"
10 href="/apple-touch-icon.png"
11 />
12 <link
13 rel="icon"
14 type="image/png"
15 sizes="32x32"
16 href="/favicon-32x32.png"
17 />
18 <link
19 rel="icon"
20 type="image/png"
21 sizes="16x16"
22 href="/favicon-16x16.png"
23 />
24 <link rel="manifest" href="/site.webmanifest" />
25 </Head>
26 <body>
27 <Main />
28 <NextScript />
29 </body>
30 </Html>
31 )

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:

2 rel="icon"
3 type="image/png"
4 href=""

Do follow me on twitter where I post developer insights more often!

Leave a Comment

© 2024 CodingDeft.Com