How do I add a favicon with NextJS?

Learn how to easily add a favicon to your NextJS project with this detailed guide and also find out how to generate a favicon on demand using ImageResponse.

Louis-Nicolas Leuillet

Updated on December 6, 2024

Adding a favicon is not necessarily a walk in the park: you need to consider the size, the format, and the tag to use to display your icon.

A favicon is a small icon used as a favorite (the term "favicon" comes from the English "favorite icon"). It is also displayed in the browser tab.

Fortunately, installing a favicon with NextJS (or Next.js for the insiders) is a real pleasure! 😬

Step 1: Prepare the Favicon

Before adding your favicon to your NextJS project, you need to follow two rules:

An image format - It must be in one of the following image formats: .ico, .jpg, .jpeg, .png, or .svg
Having a reduced size - NextJS allows you to use images of any size, but it’s still better if you use an image with a reduced size

If you don't want to hassle, you can use this favicon generator.

Step 2: Use the Favicon

With the App Router

To use a favicon with the app router, simply rename your image to icon.

If you have followed Step 1 correctly, you should have an image in the correct format. All that's left is to drag and drop your favicon into the base of the app router.

And that's it! 😋

If you want to learn more about NextJS, go to see this page, you should love it. ✨

Here is the code generated by NextJS when you drop a favicon.[ico | jpg | jpeg | png | svg] image into your app router:

HTML

<link
      rel="icon"
      href="/icon?<generated>"
      type="image/<generated>"
      sizes="<generated>"
    />

With the Pages Router

If you are using the pages router of NextJS, you might want to create an app folder to use the app router to make your life easier. Creating a favicon with the pages router is a bit more complicated. 🤔

You will need to create an image must be in .ico format. Fortunately, if you already have an image in another format, many online converters exist. For example, this one.

Once you have your image, you need to rename your image to favicon.ico.

Finally, you need to add your favicon to the public/static folder.

The static folder is a folder used for all resources that do not change on your website, like your favicon or your fonts. If you don’t have it, you have the option to create it.

You should normally end up with this:

CONSOLE

/public/static/favicon.ico

To finish, you need to modify either the _app.js file or the _document.js file to add this:

JSX

<Head>
        <link rel="shortcut icon" href="/static/favicon.ico" />
    </Head>

Let’s explain this example a bit:

Head is the component provided by NextJS that allows you to add tags to the header of the HTML page.
link is a tag that allows you to link a resource; here, we specify that it’s an icon (rel="shortcut icon") and a shortcut.

Finally, we use the _app.js or _document.js file because all the pages of our site use one or the other of these base pages. Thus, by adding a tag that allows having a favicon on one of the two pages, all the pages of our project now have a favicon. 😉

Bonus: Using a JavaScript Favicon

Thanks to NextJS, we can also generate a specific favicon for each page. This is a favicon created using a JavaScript file.

It is only possible to (easily) generate a JavaScript favicon with the app router of NextJS.

File Type

You need to have a JavaScript or TypeScript file. Nothing different from what you’re already used to doing in your project.

Next, you need to add a file named icon.[js | jsx | ts | tsx] to your app router. You should have:

CONSOLE

/app/icon.[js | jsx | ts | tsx]

The Code to Use

To generate an image for your page, you need to use the ImageResponse component provided by NextJS.

Here’s a small example:

JSX

import { ImageResponse } from 'next/og'
     
    // Define the favicon dimensions
    export const size = {
      width: 128,
      height: 128,
    }
    
    // Create a .png image
    export const contentType = 'image/png'
     
    // Generate an image
    export default function Favicon() {
      return new ImageResponse(
        (
          <div
            style={{
              fontSize: 24,
              background: 'black',
              width: '100%',
              height: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
            }}
          >
            B
          </div>
        ),
        // Define the options, including the size
        {
          ...size,
        }
      )
    }

With this example, you can imagine all that JavaScript allows you to do for your favicons!

Favicons generated by NextJS cannot be modified after build time. So when you export your project to put it online.

Finally, know that this file also receives a props params:

JSX

export default function Icon({ params }) {
      // ...
    }

Conclusion

Adding a favicon to a NextJS application is quick and easy. But, as we saw in the two examples with the pages router and the app router, it's much simpler with the latter.

Finally, we saw that it is possible to generate a favicon on the fly with NextJS!

If you want to learn everything about NextJS, we have prepared something special just for you. 🤭

Category: Development