How to add a Favicon in HTML- An easy tutorial!

A Favicon is a small, iconic image associated with a Website or Webpage. Favicons are significant identity icons that represent a website on the Address bar, Browser tabs, Browser history, Bookmark bar and even in the Favorites toolbar. The favicons help identify your website from others, when users have many tabs open, or they are browsing through Bookmarks bar or Browser History. 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. In short, favicons are essential as it is associated with your brand identity.

If you have developed a website, once it gets ready, you must design and add a favicon. If there is no favicon in your website, then visitors would only see a generic web page icon.

Here you can see the favicon of this website.

How to Create a Favicon?

There are different methods to create a favicon. You can use a program such as Adobe Photoshop to create a favicon. You can also choose the easiest method to generate favicons using a website. Websites such as favicon.cc, Favicon.ico & App Icon Generator or favicon.io are useful.

Characteristics of Favicon

When you are creating a favicon, you must keep in mind the following key characteristics.

Format of Favicon

The .ico format is widely accepted by the browsers and so, it is the commonly used formats. The .ico format enables browsers to automatically detect the favicon.ico and display the favicon. However, you can also use .png, .jpeg formats too. Besides, the animated version of favicons is also suitable as a .gif format.

Size of Favicon

It is recommended to have favicons of 32×32, 57×57, or 76×76 or 96X96 pixels in size.

Colour Depth

A colour depth of 8-bit, 24-bit, or 32-bit is recommended.

Once your favicon is ready, you must save it in the root folder of your website. This will enable most browsers to automatically display the favicon.

How to Add a Favicon in HTML?

Now let’s see how to add a Favicon in HTML!

The standard implementation is to add a link element with a ‘rel’ attribute in the <head> section of the document to specify the file format and file name and location.

In short, you need to place the following code under the <head> element in your HTML document.

<link rel=“shortcut icon” type=“image/x-icon” href=“favicon.ico”/>

Your code should look like this. You can change the attribute accordingly for different file formats. You can see the examples below for other file formats.

For PNG file format

For the PNG Format, the following code can be used as given below.

For GIF file format

For the GIF Format, the following code can be used as given below.

Additional note: An animated GIF favicon can be set through the <link> tag, but as of now only Firefox allows it. In the rest of the browsers, GIF will be displayed, but without animations. To achieve the animated effect in them, you need to include some JavaScript.

For SVG file format

For the SVG Format, the following code can be used as given below.

You can also watch the tutorial on how to add a favicon in HTML. This code is suitable for browsers such as Internet Explorer, Chrome and Firefox.

HTML code for Apple Users

You can provide the following code to provide favicon for Apple folks. For Apple users, it is possible to provide a custom icon that users can display on their home screens. The size of favicon recommended for iPad is 180×180 pixels

The iOS will add a reflective shine and rounded corners to your iOS home screen icon. You can use the following code if you prefer it without the reflective shine.

HTML code for Android Users

You can provide the following code to provide favicon for Android devices. The Android tablets prefer a PNG icon of dimension 192 × 192 pixels.

That’s all!

So, whether it is a business website or a website for blogs, Favicon is a must! Now, how to add a favicon to HTML isn’t unknown to you. Try creating a wonderful favicon using the methods suggested and add it to your website!