HiDPI (32x32px) favicon.ico #1285

Closed
AlecRust opened this Issue Jan 9, 2013 · 19 comments

Comments

Projects
None yet
7 participants
@AlecRust
Contributor

AlecRust commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@exside

exside Jan 9, 2013

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

exside commented Jan 9, 2013

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

@patrickkettner

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner Jan 9, 2013

Contributor

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

Contributor

patrickkettner commented Jan 9, 2013

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

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jan 9, 2013

Member

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.

Member

jonathantneal commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@exside

exside Jan 9, 2013

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

exside commented Jan 9, 2013

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

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jan 9, 2013

Member

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

Member

jonathantneal commented Jan 9, 2013

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

@alrra

This comment has been minimized.

Show comment
Hide comment
@alrra

alrra Jan 9, 2013

Member

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)

Member

alrra commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@exside

exside Jan 9, 2013

@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

exside commented Jan 9, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@jonrandahl

jonrandahl Jan 9, 2013

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 #1285 (comment) .

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

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 #1285 (comment) .

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

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jan 9, 2013

Member

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?

Member

jonathantneal commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@drublic

drublic Jan 9, 2013

Member

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.

Member

drublic commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@AlecRust

AlecRust Jan 9, 2013

Contributor

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.

Contributor

AlecRust commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jan 9, 2013

Member

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

Member

jonathantneal commented Jan 9, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@AlecRust

AlecRust Jan 9, 2013

Contributor

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.

Contributor

AlecRust commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jan 9, 2013

Member

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

Member

jonathantneal commented Jan 9, 2013

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

@exside

This comment has been minimized.

Show comment
Hide comment
@exside

exside Jan 9, 2013

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

exside commented Jan 9, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@jonrandahl

jonrandahl Jan 9, 2013

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.

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

This comment has been minimized.

Show comment
Hide comment
@AlecRust

AlecRust Jan 9, 2013

Contributor

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

Contributor

AlecRust commented Jan 9, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Jan 9, 2013

Member

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.

Member

jonathantneal commented Jan 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@alrra

alrra Jan 10, 2013

Member

Thanks again @AlecRust and @jonathantneal !

Closing this in favor of #1286.

Member

alrra commented Jan 10, 2013

Thanks again @AlecRust and @jonathantneal !

Closing this in favor of #1286.

@alrra alrra closed this Jan 10, 2013

jonathantneal pushed a commit that referenced this issue Jan 10, 2013

Jonathan Neal
Merge pull request #1286 from jonathantneal/issue-1285
HiDPI (32x32px) favicon.ico - Issue #1285

brson pushed a commit to brson/rust-www that referenced this issue Jan 9, 2014

Use 32x32 favicon
Compatibility shouldn't be a concern.
h5bp/html5-boilerplate#1285 (comment)

@texastoland texastoland referenced this issue in purescript/purescript.github.io Mar 6, 2016

Merged

Favicon! #65

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment