DEV Community

Cover image for How To Add A Favicon To Your Webpage
Abhishek.H
Abhishek.H

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 favicon.io/favicon-converter 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

Discussion (6)

Collapse
marmahan_25 profile image
MarMahan

I can use the word favicon. But what is it really? Well, in this article, you will be answeri the question how to add a favicon to your website. bond breaking candle spell

Collapse
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 🙌🙌

Collapse
ah7 profile image
Abhishek.H Author

Thank you so much! 🤗😁

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

Collapse
ah7 profile image
Abhishek.H Author

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

Collapse
nirveddavis profile image
NirvedDavis

As soon as you upload the file, your browser should start displaying the icon for all pages on your site. call me spell