Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

HiDPI (32x32px) favicon.ico #1285

Closed
AlecRust opened this Issue · 19 comments

7 participants

@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
Owner

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
@jonathantneal

favicon-16x16
favicon-32x32

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
Owner

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
@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
Owner

Thanks again @AlecRust and @jonathantneal !

Closing this in favor of #1286.

@alrra alrra closed this
@brson brson referenced this issue from a commit in brson/rust-www
@adrientetar adrientetar Use 32x32 favicon
Compatibility shouldn't be a concern.
h5bp/html5-boilerplate#1285 (comment)
9bda6bc
@michaelthorne michaelthorne referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.