How To Add Tab Icon In HTML | Favicon In HTML

Favicons are an essential part of a good-looking website.

Tab Icon in HTML websites or otherwise known as the favicon is a small image that is displayed next to the page title in the browser tab.

Sometimes, website generators add a default favicon or tab icon to your website but having your own personalized website favicon is certainly a bonus and professional for your website.

In this blog post, we will see how easy it is to add a favicon an HTML website step by step.

Adding Favicon or Tab Icon In HTML Website

To add a favicon to your website, we first need an image.

This image can be a logo of your website or company or can be something else that relates to your website.

Dimensions Of Favicon Image In Websites

All modern browsers and devices support 32x32 icons.

You can scale your image to create a 32x32 pixel image and then move on to the next step.

If you don't know how to scale your image, there are many online favicon generators that you can take help from:

• https://favicon.io/
• https://realfavicongenerator.net/

Or, you could just google for one.

Adding Favicon To HTML

Now that you have your favicon or tab icon image ready, it is now time to use it in your HTML webpage.

To use this, open your html file.

In the Head section of the HTML, you have to create a link tag like below.

The href in the above code will be the path of the image that you want to use.

When placed in the head tag, the link tag looks like below:

Result: