Favicons – Introduction

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.
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.

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.

• Click-to-zoom is enabled on the foreground image.
• Keyboard controls are available: cursor right and left to rotate the carousel, Z to toggle zoom on the foreground image, and C to toggle its caption.

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.