Menu
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> 
543
To resolve the missing icon problem: copy/paste the two saved 'Favicons' files from the new folder (see 4. above) to "C:\Users(User name)\AppData\Local\Google\Chrome\User Data\Default". Restart chrome. Your icons should be in place now nice and neatly.
The optimal size for creating a favicon is 16x16 pixels, which is the size in which they are most commonly displayed. However, they can appear in larger dimensions too (such as 32x32 pixels).
Google has not changed this design in over eight years, so the change caused speculation that more design changes might be afoot. Well, it turns out that the new Favicon is part of a new family of icons Google has designed for use in different situations, from its logo to the browser favicon to mobile applications.
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.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
