HiDPI (32x32px) favicon.ico

[AlecRust]

It now seems to be pretty standard to build favicons at 32x32px rather than 16x16px to accomodate HiDPI devices (GitHub's/Apple's).

I've personally gone through all my sites and replaced the 16x16 version with 32x32, but I did notice H5BP was still using a 16x16 version.

In the same way we offer HiDPI versions of Apple Touch icons, I propose we also offer an HiDPI favicon.

[exside]

any issues with older browsers when using this? (especially pointing at ie7/8)?

[patrickkettner]

As @AlecRust mentioned, github is using a 32x32, and it's favicon shows up for me fine on ie 7 and ie 8

[jonathantneal]

GitHub and Google distribute an icon with both 16x16 and 32x32 formats. On my XP virtual machine, IE6 is ignoring the GitHub icon and accepting the Google one. I think it may have nothing to do with the dual formats, but instead something to do with http vs https, but that's just a shot in the dark.

[exside]

how? .htaccess? and based on what criteria do they serve one or the other?

[jonathantneal]

Icons can embed several sizes. You can learn more about it @ http://snook.ca/archives/design/making_a_good_favicon

[alrra]

any issues with older browsers when using this? (especially pointing at ie7/8)?

No, as long as it's in the ico file format:

Creating Icons in the Correct Size and Format

A shortcut icon for Internet Explorer must be square in size, and at least 16 x 16 pixels. Consider creating both a 16 x 16-pixel icon as well as a 32 x 32-pixel icon (and larger, bandwidth permitting), since on high-DPI displays, Internet Explorer may stretch the icon to fit the available space.

To create the icon, use an icon editor, such as Microsoft Paint or the one included in Microsoft Visual Studio, and save the icon in the .ico file format (or save as a bitmap, and then rename the file with a ".ico" extension). Internet Explorer will ignore icons that are not in .ico format, and will instead display the default Internet Explorer shortcut icon.

(from: http://msdn.microsoft.com/en-us/library/ms537656%28v=vs.85%29.aspx)

[exside]

@jonathantneal: thanks for that link! Good article. I actually knew that .ico 's can have multiple images inside (just extracted the 256px version today from an icon =D) but I didn't know that this fact does help us in the browser world^^...have to find out how I actually do this with alpha transparency ... i think I try png2ico cmdline tool...

@alrra: does "A shortcut icon for Internet Explorer must be square in size, and at least 16" mean we don't even have to create the 16px version bc 32px version gets scaled down

[jonrandahl]

Luk, et al,

Interesting thread here as I had found Hans Christian’s H5BP Favicon psd template (linked below) right before Christmas linked from the Dork Report Fireworks Template (also linked below) and asked him about a process I’ve used for a while now to create multi-layered favicon in Gimp (linked below as well).

I’ve actually taken Hans’ psd and extended it to include the 128-16px ratios which uses the same functionality in Photoshop to create all of the icons for a site from 144 precomposed down to the 32 ratio for the touch icons as well as the 128-16 ratios for the ico to be ported into Gimp. Would this PSD Template be of use to anyone else? If so, let me know and I’ll put it up on Github for anyone who wants it.

Thank you for your time and patience,

Jon

HC PSD Template: http://drublic.de/blog/html5-boilerplate-favicons-psd-template/

The Dork Report Fireworks template: http://www.thedorkreport.com/favicon-apple-touch-icon-adobe-fireworks-template/

Multi-layered Ico: http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

Random Precision Ltd.

Twitter: @precisioncoding Facebook: http://goo.gl/nNp57

P Please consider the environment before printing this e-mail

From: luk [mailto:notifications@github.com] Sent: 09 January 2013 18:19 To: h5bp/html5-boilerplate Subject: Re: [html5-boilerplate] HiDPI (32x32px) favicon.ico (#1285)

@jonathanneal: thanks for that link! Good article. I actually knew that .ico 's can have multiple images inside (just extracted the 256px version today from an icon =D) but I didn't know that this fact does help us in the browser world^^...have to find out how I actually do this with alpha transparency ... i think I try png2ico cmdline tool...

@airra: does "A shortcut icon for Internet Explorer must be square in size, and at least 16" mean we don't even have to create the 16px version bc 32px version gets scaled down

— Reply to this email directly or view it on GitHub https://github.com/h5bp/html5-boilerplate/issues/1285#issuecomment-12058836 .

https://github.com/notifications/beacon/HSFEcdU42WIJnqCp5cBuV7jDajGt-XVDQLgF5M_l0dzgaA2acE2iYrX5ATT2_rX9.gif

[jonathantneal]

pngcrush -rem allb -brute -reduce favicon-16x16.png favicon-16x16-crushed.png
pngcrush -rem allb -brute -reduce favicon-32x32.png favicon-32x32-crushed.png

mv favicon-16x16-crushed.png favicon-16x16.png
mv favicon-32x32-crushed.png favicon-32x32.png

png2ico --colors 16 favicon.ico favicon-16x16.png favicon-32x32.png

This produced a 1078 byte favicon.ico with 16x16 and 32x32 sizes. Should I file a pull request?

[drublic]

This sounds good to me @jonathantneal. I think we should include the 32x32 version to support retina displays HiDPI devices.

@jonrandahl I will link to your work from the article. Please ping me when you publish it :) Thanks in advance.

[AlecRust]

Just to clarify, is there any issue with providing just the 32x32 version on its own? I'm not aware of any scaling down issues on older browsers that this causes.

[jonathantneal]

@AlecRust, after some Googling, the common excuse is that Chrome only supports the 16x16 size when the ICO format is used. If this has since changed, then we could consider dropping the 16x16 version.

[AlecRust]

The current Stable Chrome supports all commonly used favicon implementations as far as I know, but even if it only supports the 16x16 size when the ICO format is used, surely that doesn't matter since it supports the 32x32 size.

[jonathantneal]

"but even if it only supports the 16x16 size ... surely that doesn't matter since it supports the 32x32 size" Eh?

[exside]

@all, interesting discussion =), thanks!

@jonrandahl: yes, would definitely be interested in that psd template!

and lol @chromebrowser...why is excactly one of the most modern browsers limiting something like that =)...would have expected that from IE...but chrome^^...so did sbody test that with maybe chrome 20 and a "only-32px-favicon"?

and how about alpha transparency...maybe it's only my lack of some essential skills (tried generating favicons via fireworks and photoshop [with plugin]), but I usually get crappy results when using these and wanting a transparent background...I actually use the online generator @ favicon.cc, provided best results for me.

will the terminal code posted above from @jonathantneal produces nice transparent favicons?

and actually with this in my mind now, I would love to drop that apple-touch-icon link tag and just use the multiple icons in one file approach...but will that work? Does iOS check the favicon if there's no link tag?

[jonrandahl]

Just found this nugget too:

http://www.netmagazine.com/features/create-perfect-favicon

Hans, will adjust my template to include and post the GitHub link for all when done.

Jon

Sent from my 768/1024 mini

On 9 Jan 2013, at 20:27, Alec Rust notifications@github.com wrote:

The current Stable Chrome supports all commonly used favicon implementations as far as I know, but even if it only supports the 16x16 size when the ICO format is used surely that doesn't matter since it supports the 32x32 size.

— Reply to this email directly or view it on GitHub.

[AlecRust]

@jonathantneal possibly we're getting our wires crossed :)

If we're serving a 32x32px favicon along with H5BP that either gets served at those dimensions or scaled down successfully in all browsers, why does it then matter that "Chrome only supports the 16x16 size when the ICO format is used" (which isn't the case anyway)? Why is that a reason not to remove the 16x16px version, considering it supports the 32x32px version?

[jonathantneal]

I just tested a 32x32-only version, and it worked in IE6+, Safari 4+, and the latest Chrome, Firefox, and Opera. I'll add another commit to the pull request with just the 32x32 size, and we can decide if we want to move the web forward.

[alrra]

Thanks again @AlecRust and @jonathantneal !

Closing this in favor of #1286.