You may have noticed the small icon for this blog in the URL bar and/or on the tab for the page. This icon, called a favicon, may also appear in favourites, bookmarks, and history lists. Favicons are a very simple and effective way of making your site stand out. A significant proportion of professional web sites still fail to use them; coupled with an effective and succinct page title, a well-designed favicon will make your page easier to spot (especially when a user has two dozen tabs open), remember, and recover (from a bookmark list of hundreds of sites).

While simple favicons are good, technology has moved on since the format was first proposed in 1999: a 16 × 16 pixel favicon.ico file will continue to work in all browsers, but icons in new, larger sizes and different formats are optimal for newer browsers, platforms, and social media services. This series will talk about designing and developing favicons, from the simple to the advanced.

First, we need to look at the various formats that are supported for favicons in modern browsers. All browsers support the .ico format. Many also support animated images, in .gif and .apng format, which should never be used. So the remaining, supported formats for favicons are (version support shown for each browser):

Browser	PNG	JPEG	SVG
Chrome	All versions
IE	No
Firefox	1.0	1.0	No
Opera	7.0	7.0	9.6
Safari	4.0	4.0	No

An SVG icon would be ideal, as it would scale to absolutely any size required… but as you can see, Firefox, Safari and Internet Explorer do not currently support the format, at least for icons. Similarly, PNG would great, except for the lack of IE support.

While older, the .ico format still has a number of advantages, besides broad browser support: the format has the unusual capacity of being able to store multiple versions of the icon at different resolutions inside a single .ico file, rather like PhotoShop and layers in PSD files. Different browsers will automatically use different resolutions of the .ico file as appropriate. For this reason, I recommend building an advanced favicon at several resolutions, storing them all in the same file. It is these resolutions, and general design rules for icons, that I will discuss in the next article.