isotropic-2022
Share
Blog
Search
Menu

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

By James LePage
|
Last updated on July 4th, 2022
|

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.

isotropic-2022-07-04-at-20-57-51

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

isotropic-2022-07-04-at-20-57-36

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

isotropic-2022-07-04-at-22-27-22
isotropic-2022-07-04-at-22-28-57

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.

import Head from "next/head" <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"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> </head>

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.

The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Roopesh
Roopesh
1 year ago

Where to add the head tag?

Kittie.tech
Kittie.tech
1 year ago
Reply to  Roopesh

The <Head /> should be used in _document file

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram