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, but a significant proportion of professional developers still fail to create their own favicon branding. 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.

All browsers support the .ico format for favicons. Many also support animated images, in .gif and .apng format, which should never be used. The other supported formats are:

An SVG icon would be ideal in many cases: favicons are often (but not exclusively) graphical, and as vectors, SVG icons would scale to absolutely any size required. Unfortunately, as you can see, Firefox, Safari and Internet Explorer do not currently support the format, at least for favicons. Similarly, PNG would be great if we could disregard the singular exception of IE.

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 taking one of three approaches in building a favicon:

Option 1

Create a standard 16 × 16 pixel favicon as an .ico. The best supported option, but the lowest quality.

Option 2

Create an advanced favicon at several resolutions, storing each version in the same file. The best quality, at the cost of significantly higher file size.

Option 3

Create a 96 × 96 PNG file, served as a favicon for all browsers except IE. Create a standard 16 × 16 pixel .ico file for Internet Explorer, which is left at the root of the site. This acts as a good compromise between the first two options.