demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Favicons – Introduction

html / favicons

Estimated reading time: 2 minutes, 12 seconds

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:

Browser version support for favicon formats
BrowserPNGJPEGSVG
Chrome1.0
IENo
Firefox1.01.0No
Opera7.07.09.6
Safari4.04.0No

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

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.