Generate Multiple Size Favicon

11 February 2013

The Favicon is an essential part of any website; it's the small icon used by browser alongside the Page title. Having a memorable favicon is important as it would make your site far more identifiable within the multitude of tabs, and favourites that your visitors have.

The most important bit is to provide a good quality favicon; for each browser and use. Whilst most browsers use a standard size of 16x16 pixels this is not always the case. When saving a website as a favourite or saving a shortcut, larger icons might be used. Thus its important to provide various sizes to cater for all the possibilities.

The standard Favicon format uses the .ico extension, this is a Microsoft Icon which allows to bundle separate icons into one. The first step is to create png icons of the correct sizes. Then a tool such as icoutils can be used to bundle up the various pngs together, creating an icon file which consists of the various supported sizes.

              $ icotool -c favicon-16-16.png favicon-32-32.png favicon-48-48.png -o favicon.ico

            

If you're not worried about creating all the pngs yourself but rather want to scale done one of your images; there are plenty of utilities out there. Convert Icon is one such example providing a service to upload your own image, then choose the sizes you'd like to support and finally returns the pre-compiled icon with all the various sizes. Whilst this method works just fine it might not provide the fine level of control over your icons as generating each icon size separately would.

An alternate way to provide favicons for modern browsers (excluding internet explorer) is the use of a link to denote the website icon. This html snippet supports size properties allowing you to define separate icons for different sizes.

              <link rel="icon" type="image/png" sizes="114x114" href="http://example.com/image.png" />

            

Similarly apple have their own property; so support shortcut icons for both the iPad and the iPhone. These come at different sizes 57×57 & 144x144 pixels for the iPhone, normal and retina respectively and 74x74 pixels for the iPad standard and 144x144 for the retina version.

              <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png">

            

With the Favicon being an essential part of the website; its definitely not worth overlooking; make your website and brand recognisable and use the appropriate icons for the relative devices to provide the best possible user experience.