How do I add a favicon with NextJS?

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.

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! 😋

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

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

You should normally end up with this:

/public/static/favicon.ico

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

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

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:

/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:

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!

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

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