问题
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>
回答1:
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.
回答2:
I would just use the 16px version in the ico file. Chrome also supports multiple resolutions for the fav icon. For example:
<link rel="icon" href="/fav32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/fav64.png" sizes="64x64" type="image/png">
<link rel="icon" href="/fav128.png" sizes="128x128" type="image/png">
Will offer three different image sizes for the icons. See the spec [1] for more details.
[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon
回答3:
After some testing it looks to me as follows:
- First icon encountered will be used in the tab in chrome or in the top left hand corner if in application mode. It will also be used for the link in the start menu.
- Icon with the biggest Sizes value will be used for Desktop shortcut and Task bar
When I had the following order:
<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />
It resized the 64x64 icon for all the icons.
When I had the following order:
<link rel="icon" href="icon16x16.png" sizes="16x16" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon64x64.png" sizes="64x64" type="image/png" />
It used the 16x16 icon on the tab/top left in chrome and on the shortcut in the start menu. But it used the 64x64 icon on the desktop and in the taskbar.
When I did this:
<link rel="icon" href="icon64x64.png" sizes="32x32" type="image/png" />
<link rel="icon" href="icon32x32.png" sizes="64x64" type="image/png" />
It used the first image (icon64x64.png) for the tab/start menu icons. It used the image with the largest sizes (sizes="64x64") value for the desktop and task bar image. Not the largest image, the one with the largest sizes value.
I have an icon that is just a blur scaled to 16x16 so I wanted a different icon at that size.
回答4:
This worked for me: I made an icon 32x32 with embedded 64x64 and 128x128, and then added sizes="64x64" to html
<link rel="shortcut icon" href="favicon.ico" sizes="64x64">
来源：https://stackoverflow.com/questions/5110741/google-chrome-uses-wrong-size-of-favicon