When I create a a ICO file on the Mac using ‘Icon Composer’ it allows specifying five images (16×16, 24×24, 32×32, 48×48, 256×256). If I specify a 16×16 and 32×32 Google Chrome (Mac OS X) use the 32×32 image as the icon that appears next to the name on the tabs and under the favourites (it is resized to 16×16). 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 16×16 image? I currently have:
<head>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
To get this to work correctly in Chrome, set
sizesto the largest icon size you have available:I tested it with icons in the Visual Studio Image Library, which include sizes of 16×16, 32×32, 48×48, and 256×256. It correctly renders the 16×16 size in the browser title bar, the 32×32 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
linkelement for each of multiple sizes, or listing multiple sizes in onelinkelement, 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 thesizesattribute has to be set to the largest available size.Setting the size to 256×256 doesn’t appear to cause problems in other browsers. IE, Firefox, and Safari all use the 16×16 size as expected.