Understanding favicon

Understanding favicon

What is a favicon?

A favicon (short for “favorites icon”) is a small image associated with a website intended to be used when you bookmark a page. Web browsers also use them in the URL bar, on tabs, etc to help the users identify a website. It is typically a 16×16 pixels square icon which is saved as favicon.ico in the root directory of the website’s server.

How to create a favicon?

A favicon can be created using any graphics/image editing softwares that allows saving of .ico files. There are also many online services which can be used to create a favicon. Since a favicon is only 16 x 16 pixel image, it can be difficult to create it as you would like it to be. It should be a clear image which will match your site. So, to create this you can start with creating a big image and then resizing it to be 16×16. However, be careful when you re-size it, since the image can get blurred while re-sizing.

How to add a favicon to your site?

Once you have the favicon.ico file created you can easily add it to your site by either of the following methods:
Method 1: Upload favicon.ico to the website’s root
Upload the favicon.ico file to your websites root. Once you upload it, make sure it is accessible from the site’s root, e.g. https://www.virendrachandak.com/favicon.ico

Method 2: Upload it to a location and then add an HTML tag for it.
You can upload the favicon.ico file to some location other than the website’s root. e.g. in WordPress you can add it to your themes folder. Once you add the file add the following code to your HTML head section.

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

In WordPress you can upload the favicon.ico file to your theme directory and then add the following code in the HTML tag (in the header.php file). If similar code already exists, delete it and then add the following.

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

Once you add the file and the tag go to your website in a browser and you should see it next to URL bar, or on tabs, or wherever the browser shows it.

Tools to use for generating a favicon

  1. Softwares such as GIMP can be use to create favicons.
  2. Online services like Faviconer.com, favicon.co.uk or Dynamic Drive, etc can be used to create a favicon.

Creating a favicon with transparent background

If you want your favicon with a transparent background then you will have to use either a GIF or PNG file instead of the ico file. To use this type of file you will have to add the tag for the favicon file in the section of the page. You can use the following tag in WordPress if you are using favicon.png file as your favicon in your theme directory

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

Which type of file to use?

You can use either .ico, .png, .gif files as your favicon. However, it is best to use the favicon.ico file due to the following reasons.

  1. Browser compatibility – All browsers support (including Internet Explorer 5.0) the .ico format
  2. Avoid 404 errors – Most of the browsers request for the favicon.ico file in your websites’ docroot (e.g. https://www.virendrachandak.com/favicon.ico). If this file does not exists then it will send an “404 not found” error
  3. Multiple icons – An .ico can hold more than one icon. You can add multiple icons of different sizes (16×16, 32×32, 48×48,etc) icons to the same file

Device support

For Apple devices and some Android devices it is possible to provide an custom icon that can be used to display when the users Add the webpage to their Home Screen. This can be done using tags similar to the following:
With rounded corners, reflective shine

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

Without reflective shine

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

For the size specifications for iOS check the documentation for Icon and Image sizes

Leave a Reply