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

Create your own favicon using favicon.cc

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

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 4.5 / 5. Vote count: 133

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

Learning Zone ✕