Hello, I am Nono.
In this article, I will explain how to set favicons on your Next.js site.

How to set favicon

The procedure is the following 3 steps

- Create a favicon image
- Upload to public
- Set up _document.tsx
Let's get started!

Create favicon image

First, let's create an image.

There is various image creation software such as Photoshop and Canva, but recently I have been using Figma for simple images. It has just the right amount of features and is fast.

Next, upload the created image to Real Favicon Generator

Click on Select your Favicon image and choose the image you just created.

Basically, you don't need to change the settings, but this time the image didn't display well in Safari (it was just a square), so I checked to Turn your picture into a monochrome icon.

After setting up, click the bottom button Generate your Favicons and HTML code.

Download the files from the Favicon package.

Upload to public

Put all the image files you just downloaded into public.

If there is a Vercel favicon.ico that is there from the beginning, you will get a message "A file or folder named ' favicon.ico' already exists in the destination folder. Do you want to replace it? " will appear in VSCode, click "Replace " and it will be replaced with the new one.

It looks gorgeous now...

By the way, browserconfig.xml seems to be needed to configure the IE11 tile design.

## Configuration of _document.tsx

Paste the following link and meta into the Head of pages/_document.tsx.


Note that all tags must have a closing tag or you'll get an error!!!



Thanks for your help Favicon checker