Those little icons in your tabs are called favicons and in this guide, you’ll learn how to create one and add it to your website.

We will need some image to use. It can be your logo, a brand mark or even a picture of yourself (I do not recommend this)

Just make sure whatever you use is clear and has high contrast.

: Put your image over a background that contrast well.


Find your logo or image you want to use

Since this is being used in browser tabs and search results, it will be small.

 and place your image from before above it and save it as a PNG.

Resize It to 32×32 Pixels

It will generate all required favicon sizes

Then download the generated ZIP file and inside you’ll find a file named 

This step is different based on how your website is build but typically in Next.js / React, just drag the file to the 

Your tab icon should change immediately.
