HTML – How to add a Favicon?

Once your website is ready, you will want to design and add a favicon.

This graphic will appear in your web-browser in the tab section as well as in the favourite toolbar.

The favicon is also used by smartphone and tablets as an “App” icon when the user decides to pin your webpage on their home screen.


There are different approaches to create your favicon. One easy approach is to use a website such as

favicon-onlineCreate your own favicon using

Once your icon is ready save it as in the root folder of your website:

HTML code to add your favicon to your webpage

Access the code of your webpage and in the <HEAD> section add the following code:

<link rel='icon' href='favicon.ico' type='image/x-icon'/ >

So your code should now look like this:

That’s it, save your page and access it in a web-browser. The favicon should now appear in the tab, next to the page title.

Did you like this challenge?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 6

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!