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.
browser-favicon

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.

smartphone-icon

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

favicon-onlineCreate your own favicon using favicon.cc

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

HTML code to add your favicon to your webpage

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

So your code should now look like this:
favicon-html

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.

Share Button
Posted in Computer Science, HTML / CSS

Our Latest Book

Follow this blog