DEV Community

Cover image for How To Add A Favicon To Your Webpage

Posted on • Updated on

How To Add A Favicon To Your Webpage

Have you ever noticed a little icon on the browser tab of the webpage you are looking at? This little icon is called a "Favicon"

Adding it to your own HTML webpage is super-easy, and I will show you how!

Step 1

Go to and upload the image you want to convert into a Favicon.

Upload or drag and drop the image

Step 2

Click download.

That big blue button!

Step 3

Choose a place for it to save.

Downloads is the place where people usually keep it

Step 4

You will see it is downloaded as a ".zip".
Click the up arrow icon that you see in the bottom of your screen, and select "Show In Folder".

After that, right click the folder and click "Extract All".

Step 5

Now you will see a bunch of items, from them you need the one labelled "Favicon".
Favicon is the one

Step 6

Open your file manager and open the folder where your website is and drag and drop the file named "Favicon" to there. Rename it to favicon.ico. Now if you run it with live server, you can see it as the icon of your webpage!

Uploading it to GitHub or other Managers

Make sure that it is in the root directory!
If this doesn't work, you might need to add the following code to the head section on each of your HTML files.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Enter fullscreen mode Exit fullscreen mode

Cover image credit: Wikipedia

Top comments (6)

drishtantr1508 profile image
Drishtant Rai

Nice article bro, favicons are easy and handy tool for me to get small but repetitive things in a website. Keep writing 🙌🙌

ah7 profile image

Thank you so much! 🤗😁

andrewbaisden profile image
Andrew Baisden

Totally underrated I have seen so many developers forget to add a favicon and leave it with the generic icon.

ah7 profile image

Thank you! Yep, a Favicon is an essential part of a website!