When I create a a ICO file on the Mac using 'Icon Composer' it allows specifying five images (16x16, 24x24, 32x32, 48x48, 256x256). If I specify a 16x16 and 32x32 Google Chrome (Mac OS X) use the 32x32 image as the icon that appears next to the name on the tabs and under the favourites (it is resized to 16x16). This causes the icon to look blurry.
Am I creating my favicon.ico correctly? Do I need to do anything else to tell the browser to use the 16x16 image? I currently have:
<head>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
To get this to work correctly in Chrome, set sizes to the largest icon size you have available:
<link rel="shortcut icon" href="favicon.ico" sizes="256x256">
I tested it with icons in the Visual Studio Image Library, which include sizes of 16x16, 32x32, 48x48, and 256x256. It correctly renders the 16x16 size in the browser title bar, the 32x32 size in the taskbar, and the appropriate size (which can vary) on the Windows 7 desktop.
While I found a lot of advice about listing a link element for each of multiple sizes, or listing multiple sizes in one link element, using the largest available size was the only way I was able to get the favicon to render correctly in all appropriate sizes. It appears that Chrome scales down from a too-large favicon by finding appropriate smaller sizes, if available, but scales up by blowing up the small size it already has. So the sizes attribute has to be set to the largest available size.
Setting the size to 256x256 doesn't appear to cause problems in other browsers. IE, Firefox, and Safari all use the 16x16 size as expected.