JonMifsud
Web Developer & Consultant

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 part is to provide a good quality sized favicon; for each browser and use. Whilst most browsers use a standard size of 16x16px 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. When resizing larger logos, it is recommended to have a good look at each favicon size, and make adjustments to make it look good on the eye, what would be know as pixel-perfect for designers.

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="16x16" href="http://example.com/favicon.png" />

            

Similarly apple have their own property; so support shortcut icons for both the iPad and the iPhone. These come at different sizes 60×60 & 120x120 pixels for the iPhone, normal and retina respectively and 76x76 pixels for the iPad standard and 152x152 for the retina version.

              <link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

            

It is important to note that Apple devices would add a shadow on top of your icon unless you set it as pre-composed. You can set the pre-composed version as displayed below. Note you should specify the precomposed icons instead of the normal ones for each design should you opt for the pre-composed version.

              <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">

            

With the Favicon being an essential part of the website; its definitely worth spending some time on; make your website and brand recognisable and use the appropriate icon sizes for the relative devices to provide the best possible user experience.

Last Updated 19/03/2014 - with the latest apple-touch-icon sizes.

Written by Jonathan Mifsud

Jonathan Mifsud is a web developer by day and an SEO enthusiast by night. He provides freelance web development and consultancy services and is available for hire. You can get in touch with him on twitter and Google+

Comments

Leave a Comment
Rajkumar

This is a very good site. I commend the simplicity and design.

Reply

28 Feb 2013 @9:41am

Post a new Comment

Please write your name.
Please enter your comment
Please enter your email address.