Favicon: A Changing Role

Many developers pay insufficient attention to the importance of favicons and thereby miss an opportunity to make their websites that much more distinctive and memorable. Far from being just a funny little dinkus propped at one end of a browser’s address bar, favicons today have become a key part of the identity of a website and are used for branding purposes. Proper use of them can help you in creating not only a good first impression among site visitors, but a lasting one. The concept of favicons was first introduced by Internet Explorer in 1999. They were produced in ICO format and were dropped in the root folder of the domain as /favicon.ico. Since then many things have changed. They are now used for multiple purposes in different devices. The most basic format of using favicon for a website is as follows:

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

The rel Property

The important part of the above declaration is the rel property. It is this property which helps the browser identify the favicon and show them properly. Traditional IE browsers used “shortcut” and “icon” both to identify the image and to display it in the browser title and shortcut bar. After the release of HTML5 this has been changed to only “icon” as the global representation of favicon.

The Type Property

The type property can sometimes define whether the browser will display the favicon or not. Internet Explorer sees only the server MIME of the ICO file, otherwise it ignores the file. In general one has to declare the favicon in following ways, for IE:

<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">

<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">

One of the best upgrades to the use of the favicon in recent times has been the acceptance of PNG files. You can use transparent images with rounded corners as the favicon for your websites. Rounded corners with transparent edges were too difficult to achieve in ICO format. Browsers like Google Chrome and Mozilla Firefox allow the use of PNG favicons. An important point to note here is that if both ICO format and PNG format are declared the ICO format will be used by all browsers, irrespective of the order in which they are declared.

<!-- Works in Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Works in Firefox, Opera, Chrome and Safari ->
<link rel="icon" href="path/to/favicon.png">

The Size

Another development in the role of the favicon is the size. Older browsers used 16×16 as the standard size of a favicon while modern browsers allow 32×32 size icons which are later scaled down to appropriate size. IE10 uses the 32×32 size icon to display in the address bar.

<!-- For IE 6-10 -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- For all other browsers -->
<link rel="icon" href="favicon.ico"/>

With the use of PNG favicons, another new property is added called size” which determines the size of the file specified in the href property. For example:

<link rel="icon" href="favicon16.png" sizes="16x16">

<link rel="icon" href="favicon32.png" sizes="32x32">

<link rel="icon" href="favicon48.png" sizes="48x48">

<link rel="icon" href="favicon64.png" sizes="64x64">

<link rel="icon" href="favicon128.png" sizes="128x128">

In general, Firefox and Safari will use the favicon which comes first in the declaration. Different versions of Chrome have different preferences. Chrome for Windows will use either 16×16 or ICO, whichever comes first. Chrome for Mac will use an ICO favicon if present or else it will go with 32×32 size favicon and scale down to 16×16 for higher clarity in non-retina devices. Opera on the other hand doesn’t have any such preferences; it randomly selects any one from all the favicons presents.

Best Use

Since Internet Explorer does not support PNG files and other modern browsers do, we can wrap ICO files in the conditional statement and leave the PNG files open. For example:

<!-- For IE -->

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- For Modern Browsers with PNG Support -->

<link rel="icon" type="image/png" href="path/to/favicon.png">

But we have an issue in the above declaration! IE 10 doesn’t support conditional statements and neither do PNG files. What should we do now? We can drop the ICO files in the root directory and make declarations for PNG files only. This way, Internet Explorer will ignore the <icon rel="icon"> and prefer the ICO image in the root directory. Modern browsers will find the <icon rel="icon"> declaration and use PNG files.

For Apple Devices

Apple devices with iOS 1.1.3 and later require a special type of rel property which can be recognized only by such devices. The rel property in such devices use apple-touch-icon and apple-touch-icon-precomposed. Here the favicons are used not only to display in browsers but also when a website is bookmarked to the apps screen. Such favicons need to be of a higher resolution and custom-made in order to stand out among other apps.

<!-- For rounded corners and reflective shine in Apple devices -->

<link rel="apple-touch-icon" href="favicon.png" />

<!-- Favicon without reflective shine -->

<link rel="apple-touch-icon-precomposed" href="favicon.png" />

The value apple-touch-icon-precomposed is used to instruct the device not to add reflective shine to the favicon and use it as it is. The recommended basic size for Apple devices is 57×57 with 90 degrees corners. For higher resolution screens use 114×114 size images. iPad 2 uses 72×72 size while iPad 3 uses 114×114 for retina display.

For Windows 8

Windows 8 uses the concept of tiles and has the option to pin a website to the home screen. The favicon in such should be of good quality in order to get look good on the screen.

<meta name="msapplication-TileColor" content="#D83434">

<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Note that in the above declaration I have used the meta tags instead of a link tag. Windows 8 prefers to see the meta declaration for images in the tiles. The msapplication-TileColor tag specifies the colors to be filled in the tile and msapplication-TileImage specifies the image to display at the centre of the tile.

Limitations to favicons

Favicons can sometime create extra traffic for your website due to repeated checking for it in the same location. Sometimes these can even create garbage 404 errors in the log files if not found. Another important limitation of these favicons is the inability to load the new favicons automatically. This problem is mostly found in older browsers such as IE6-9. The rel attribute is also not standardized by W3C, so different user agents define their own version. Favicons have been the main target of many types of phishing attacks and eavesdropping in past such as showing the secured icon when they are not certified to be secured. These are all points to be taken into consideration when deciding whether and how to use favicons on a website. None of them should stop you using favicons creatively. Today, favicons have an importance of their own. Their visual impact will continue to grow and you should expect them to grow in functionality, as well.

Frequently Asked Questions about Favicons