How To Add A Favicon To A Next.JS Website (2025) - Step By Step Tutorial

So you've finally finished building your website with Next and you're almost ready to go live. But, you're unable to install a Favicon - nothing works!

In this tutorial, we're going to walk you through adding a favicon to a Next.JS website.

With the most recent versions of Next, adding a favicon has become a pretty easy process. Previously, there were several steps you need to do to add a favicon to a project. In fact, 2022 these steps still work, except they were depreciated for a much easier method. However, if you can't get it to work, check this StackOverflow out.

Now, let's take a look at the best way to adds a favicon to a NextJS site.

First, we need a favicon. A favicon can be a PNG, GIF or ICO and should be about 16x16, according to the MDN web docs.

Best practice dictates generating an ico file and naming it favicon.ico.

You can use favicon.io to generate this from another image type.

Now all you need to do is take this file and place it into your /public directory. And just like that, it will automatically update, and the favicon will be displayed by browsers after your next build.

However...

There are some downsides to this elegantly simple method. For example, this basic implementation means that if you add the site to a phone (as a shortcut) the icon will not show.

Because of this drawback, I suggest implementing an alternative favicon.ico setup, using RealFaviconGenerator. We've been using this free tool for years when building our WordPress websites, and now also use it for NextJS JAMStack sites.

First head to Real Favicon Generator, and upload your image.

You'll end up on a page like this. Tweak the icon as needed.

Then, scroll all the way don and click "Generate Your Favicons and HTML Code".

Download the favicon image pack and upload everything inside into your /public directory (including site.webmanifest).

Finally, using the default NextJS Head component, add the generated code.

You can see that this is giving support for multiple browsers, namely the Safari SVG, alongside other favicon images which can be used on both browsers and shortcuts on mobile devices.

And this is the best way to add a favicon to a Next.JS static website. Any questions, comments or concerns? Feel free to leave them in the comments section below.