Favicon Compatible Resolutions and File Size for various Devices

Question

With the many uses for favicons nowadays (new tab page, bookmarks, url bar, IE pin to taskbar etc,) what sizes should I be including in my favicon.ico file?

I'm using Converticon and thought the easy solution would be to include all the resolutions that it supports, however, as this creates a larger file size, does the browser only download the resolutions it needs (if that's even possible), or the whole file, using up my bandwidth, and meaning the browser takes a longer time to load it?

As you might be able to tell, I'm not exactly a "pro" webmaster :)

Answer 1

• 16px is compatible with all browsers and often found in the following locations, the address bar, tabs, bookmarks.

• 24px Internet Explorer 9 (Pinned Sites).

• 32px Internet Explorer 9, Taskbar in Windows 7 and 8, Safari’s side bar.

• 57px Standard iOS size iPhone first generation to 3G+, iPod Touch

• 72px Apple iPad Home Icon

• 96px Supported by Google's TV platform

• 114px iPhone 4+ home screen, exactly double the size of the original 57px found in first generation iPhones.

• 144px Can be used with Apple iPod touch (Latest Modern, Need confirm on this).

• 128px Chrome Web Store

• 195px Opera Speed Dial - Version 11 actually supports 114x114px up to a maximum of 256x160px.

For general things like Internet Explorer 9, GoogleTV, Andriod the following can be used to specify a PNG rather than a ICO.

<link rel="icon" type="image/png" href="favicon.png" />

For Apple Devices you can use the following:

<!-- iPhone 3G -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- iPhone 4+ -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png&rdquo;>
<!-- iPad -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon- 72x72-precomposed.png&rdquo;>

File Size

PNG formats are often much larger than a standard 16x16px ICO but broadband has improved since the days when ICO first came around, providing a colorful PNG should give a more rich experience when visiting your website and if you concerned about website speed then you can further compress the PNG using lossless compression such as 'PNGCrush' 'PngOpt' or my personal favourite Smushit by Yahoo, Watch your PNG's get even smaller than ever before.

Answer 2

All browsers do not support favicons of all sizes.

I would recommend you to use a '32X32' .png file, You can add this code in the head section of your website: <link rel='icon' href='img/favicon.png' type='image/png' />

img here is the name of the folder where the file would be present. For browsers which cannot display the '32X32' favicon, you can use a '16X16' .ICO file for such browsers.