Add Website favicon icons in HTML

Lathiya Web Solutions Web-Design

How to add Favicon in HTML

Favicons are the small, square icons that frequently are associated with websites. It has almost been ICO files, either nested in the root of the domain as /favicon.ico, or organized by a CMS into a theme or images directory and displayed with. Following code shows how to add favicon in HTML:

<pre>
<link rel="shortcut icon" href="/path/to/favicon.ico">
</pre>

Favicons appear in many places, including browser toolbars, bookmarks, tabs, and address bars. Favicons provide immediate visual identification of their represented sites, enabling super-easy navigation for Web users. While surfing bookmarks with fifty tabs open, finding and clicking on icons is far more efficient than reading through piles of link text.

It is typically a 16×16 pixel square icon, often served in either 16-color or 24bit alpha-transparency format. Most probably, favicons have been served as 32×32, which is appropriately scaled down in all major and popular-legacy browsers. In IE10 Metro, the 32×32 icon is used in the address bar.

How to create a favicon?

A favicon can be created using any graphics/image editing software or online services that allows saving of .ico files. favicon size is 16X16 pixels. So it's very difficult to create it.  So start with creating a big image and after that resizing it to be 16X16 and also make sure that it was not blurred when re-sizing.

You also use online services like Faviconer.com  or Dynamic Drive to create a favicon.

If you want to create a favicon with the transparent background then you will use PNG or GIF file instead of ico file. If you want to use this type of file then add the tag for this file in a section of the page. For example, If you have a WordPress platform, then use the following tag when using the favicon.png file in your theme directory.

<pre>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />
</pre>

How to add a favicon to your site?

After creating your favicon.ico file you can add it by following methods:

method 1: upload favicon.ico file in your website root.

For example:- https://www.yourdomain.com/favicon.ico

method 2: upload the favicon.ico file to some location other than the website's root.  for example, if you have a WordPress website and you can add this file on the theme folder then add the following code in your header.php file. If the same code exists in the file then delete it and add this one. Once you have done with it. Go to your website in the browser you should see the favicon in the URL bar.

<pre>

<link rel="shortcut icon" href="https://www.yourdomain.com/favicon.ico" />

</pre>

OR

<pre>

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

</pre>

In Apple or Android devices, it's possible to add a custom icon, so for this add the following line in your header.php file.

With rounded corners, reflective shine :

<pre>

<link rel="apple-touch-icon" href="https://www.yourdomain.com/favicon/image.png" />

</pre>

Without reflective shine :

<pre>

<link rel="apple-touch-icon-precomposed" href="https://www.yourdomain.com/favicon/image.png" />

</pre>

I hope this post favicon icon in html is helpful for you. If you have any query than comment below. Our website developer in surat is ready to help you.