HiDPI (32x32px) favicon.ico - Issue #1285

[jonathantneal]

Includes 32x32 version to support retina displays HiDPI devices.

See Issue #1285

[alrra]

@jonathantneal my personal opinion is that the 32x32px image looks kinda bad. How about this one ¹ ?

¹ hmm, it seems that GitHub doesn't allow you to attach .ico images: Unfortunately we don't support that file type yet. Try image files less than 5MB.)

[drublic]

Actually I think we should stick to the flat icon for the small logo as it is easier to recognize - "less is more".
@alrra, the icon looks a bit "blurry" when you zoom in which isn't great I think.

As per tests by @jonathantneal in #1285 I think we are good to go with the single 32x32px version of the flat icon.

Other opinions to flat vs. 3D?

Edit: Ah, and thanks for the work everyone :)

[jonathantneal]

@alrra I think this resolves the blur. I added a second commit. Let me know if this looks better to you.

@drublic, I have added the other commit to this request. Would you be okay with pulling in just the second commit? Or would you rather I close this and start over?

[drublic]

You can overwrite the commit by force pushing. But we can also cherry pick the second one.

[jonathantneal]

Cool. @alrra does the second commit look good to you now? They look nearly identical in smoothness, size, and position my machine, with a slightly darker shade on the 32x32 version.

[alrra]

@jonathantneal yes :D, just one more thing (and maybe this is just me), doesn't it looks even better if you move the star 1px down, e.g.:

(the one on the left is the original with the star moved 1px down)

Also, thanks for the tests and everything. 👍

H̶e̶r̶e̶ ̶i̶s̶ ̶t̶h̶e̶ ̶f̶a̶v̶i̶c̶o̶n̶.̶i̶c̶o̶ ̶w̶i̶t̶h̶ ̶t̶h̶e̶ ̶s̶t̶a̶r̶ ̶m̶o̶v̶e̶d̶ ̶1̶p̶x̶ ̶d̶o̶w̶n̶.̶

[sarukuku]

Looks better 1px down!

[jonathantneal]

@sarukuku, @alrra, I agree, but would you test something for me first? I had raised it one pixel to match the original icon. Look at it as a favicon in a browser next to a site deploying the original. If we all still think it looks better vertically centered (1px down) then I can change it.

[alrra]

top-down: Firefox / Chrome / Opera on Mac OS X

HTML5 B...= the favicon that is currently used by H5BP
new.ico = Jonathan's original favicon with the star moved 1px down
old.ico = Jonathan's original favicon

Personally, I still prefer it with the star 1px down

[sarukuku]

I vote for the new one. I think I can see the 1px difference. Or I'm
coming mad. Probably both. :)

[AlecRust]

Personally prefer the 1px down version too.

Current 16x16 version and @alrra's 1px-down 32x32 version on an HiDPI screen:

[jonathantneal]

Okay, it's 32x32 the way we all want it. I goofed at squashing the commits, but @drublic can fix it. :P

[philwareham]

I've been using http://www.xiconeditor.com to create the favicon at multiple sizes - is that old hat now? Do HiDPI resolutions incorrectly use the 16px version if you provide a multi resolution favicon?

[AlecRust]

There's no need to provide a 16x16 version as well as a 32x32 version - there are no issues with the 32x32 version down-scaling on older browsers.

[philwareham]

What about the 24px and 64px versions - worth having as well?

[drublic]

@philwareham I don't thing they are needed anywhere. 16px is the default size, 32px is for high resolution displays. No need to include the others.

[paulirish]

Seems best to use the full power of multiresolution images within an .ico
.. That way you don't have to defer to automatic downscaling for the most
common resolution.

see also xiconeditor.com and
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

On Tue, Jan 15, 2013 at 5:42 AM, alrra notifications@github.com wrote:

What about the 24px and 64px versions - worth having as well?

• under 32x32px - not worth having them, as far as I know and as
  @AlecRust https://github.com/AlecRust already pointed out, web
  clients down-scale them.

• over 32x32px - it depends on what web client functionality /
  feature you are targeting (e.g.: the Google TV browser requires a
  96x96pxhttps://developers.google.com/tv/web/docs/design_for_tv#faviconsfavicon, Opera, for the Speed Dial feature, requires either a
  114x114pxhttp://dev.opera.com/articles/view/opera-speed-dial-enhancements/#use-logofavicon or the apple-touch-icons, etc.).

  —
  Reply to this email directly or view it on GitHubhttps://github.com/HiDPI (32x32px) favicon.ico - Issue #1285 #1286#issuecomment-12267026.

[jonrandahl]

Paul, et al,

Feel free to use this to help you create a multiple-layer favicon:

https://github.com/jonrandahl/H5BP-Multi-Layer-FavIcons

It's based on Hans Christian's template!

Every little helps!
Jon

Sent from my 320/480 device

On 22 Jan 2013, at 19:48, Paul Irish notifications@github.com wrote:

Seems best to use the full power of multiresolution images within an .ico
.. That way you don't have to defer to automatic downscaling for the most
common resolution.

see also xiconeditor.com and
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

On Tue, Jan 15, 2013 at 5:42 AM, alrra notifications@github.com wrote:

What about the 24px and 64px versions - worth having as well?

• under 32x32px - not worth having them, as far as I know and as
  @AlecRust https://github.com/AlecRust already pointed out, web
  clients down-scale them.
• over 32x32px - it depends on what web client functionality /
  feature you are targeting (e.g.: the Google TV browser requires a
  96x96pxhttps://developers.google.com/tv/web/docs/design_for_tv#faviconsfavicon, Opera, for the Speed Dial feature, requires either a
  114x114pxhttp://dev.opera.com/articles/view/opera-speed-dial-enhancements/#use-logofavicon or the apple-touch-icons, etc.).

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/1286#issuecomment-12267026.

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

[jonathantneal]

Am I correct in saying that this and Hans' PSD template do not contain vector shapes for the H5BP icon? I noticed that the original image has the spaced drop shadow gray lines and gradient behind the star, but, in practice the 16x16 and 32x32 icons do not. Also, IE10's 144x144 tile icon wants a transparent background (contrary to the touch icon) and a separately assigned background color - they do this so that pinned sites look best when displayed as tiles in a variety of aspect ratios. Because of all these issues and the rastered source of the PSD, I found it difficult to create my own icons.

I ended up spending a lot of time redrawing the logo as a vector shape to create better scalings. Then, I created posterized layers at each size to sharpen the color density and decrease file size. Posterizing is especially useful when images are distributed as PNG icons, touch icons, tile icons, etc.

@jonrandahl, could we work together to resolve this? I will fork your project, add my versions, and post the link here.

Okay, here they are: https://github.com/jonathantneal/H5BP-Multi-Layer-FavIcons/tree/master/PSD

[jonrandahl]

Jonathan,
Would this have helped you:
http://www.thedorkreport.com/favicon-apple-touch-icon-adobe-fireworks-template/
It's based on the psd but I haven't opened it yet to see if its vectored or not?
Jon

Sent from my 768/1024 mini

On 23 Jan 2013, at 00:44, Jonathan Neal notifications@github.com wrote:

Am I correct in saying that this and Hans' PSD template do not contain vector shapes for the H5BP icon? I noticed that the original image has the spaced drop shadow gray lines and gradient behind the star, but, in practice the 16x16 and 32x32 icons do not. Also, IE10's 144x144 tile icon wants a transparent background (contrary to the touch icon) and a separately assigned background color - they do this so that pinned sites look best when displayed as tiles in a variety of aspect ratios. Because of all these issues and the rastered source of the PSD, I found it difficult to create my own icons.

I ended up spending a lot of time redrawing the logo as a vector shape to create better scalings. Then, I created posterized layers at each size to sharpen the color density and decrease file size. Posterizing is especially useful when images are distributed as PNG icons, touch icons, tile icons, etc.

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

[drublic]

@jonathantneal Oh man, sounds like a lot of work :/ I did vectorize the icon some time ago and we got this SVG icon on our organization page as a download. I haven't looked into the psd yet but it might be better than what I did back then.

[necolas]

@jonathantneal (and anyone else interested), there is an open issue here h5bp/h5bp.github.io#3 about inconsistency between the SVG and PNG (from PSD) assets. If you're interested in taking a look, or if you have already created a PSD that you think we can derive all the variants from, I'd really appreciate your input and thoughts. Thanks

[philwareham]

I don't think it's possible to make a single vector (or Photoshop smart object) the scales well to all the sizes you'll need, once you start getting to very small scales around 48px or less the vector will start to blur and the detail will become muddy. At those resolutions you really need to make a graphic optimised for the specific size.

[jonrandahl]

Right,

Maybe those sizes should be removed from any multi-layered PSD template and created as individual ones with guidance and explanations attached?

Unless explaining the situation to the user and recommending they refine the one(s) that would be in the current template is not a good idea?

However, wouldn’t this still leave the issue of rasterized graphics rather than vector based ones if Photoshop was the way forward?

Maybe the fireworks template linked below, if vectored, should be the format and template we move forward with?
I’m sure I, or anyone else, could add the sizes and tweaks to that if need be!

http://www.thedorkreport.com/favicon-apple-touch-icon-adobe-fireworks-template/

Jon

Random Precision Ltd.

Skype: contact.random.precision
Twitter: @PrecisionCoding
Facebook: http://goo.gl/nNp57

P Please consider the environment before printing this e-mail

From: Phil Wareham [mailto:notifications@github.com]
Sent: 23 January 2013 16:10
To: h5bp/html5-boilerplate
Cc: Jon R. Humphrey
Subject: Re: [html5-boilerplate] HiDPI (32x32px) favicon.ico - Issue #1285 (#1286)

I don't think it's possible to make a single vector (or Photoshop smart object) the scales well to all the sizes you'll need, once you start getting to very small scales around 48px or less the vector will start to blur and the detail will become muddy. At those resolutions you really need to make a graphic optimised for the specific size.

—
Reply to this email directly or view it on GitHub #1286 (comment) .

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

[necolas]

TBH, the template is only really used by, and useful for, the H5BP organization. It's merely a way for us to generate and store our logo assets.

[jonrandahl]

Nicholas,

With the tweaked one I created, based on Hans’ and linked below, I’m now using for all of my clients? As we’re trying to streamline the whole process for everyone, wouldn’t taking a refined template driven process to the masses be a good thing?

Jon

https://github.com/jonrandahl/H5BP-Multi-Layer-FavIcons

Random Precision Ltd.

Skype: contact.random.precision
Twitter: @PrecisionCoding
Facebook: http://goo.gl/nNp57

P Please consider the environment before printing this e-mail

From: Nicolas Gallagher [mailto:notifications@github.com]
Sent: 23 January 2013 16:51
To: h5bp/html5-boilerplate
Cc: Jon R. Humphrey
Subject: Re: [html5-boilerplate] HiDPI (32x32px) favicon.ico - Issue #1285 (#1286)

TBH, the template is only really used by, useful for, the H5BP organization. It's merely a way for us to generate and store our logo assets.

—
Reply to this email directly or view it on GitHub #1286 (comment) .

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

[necolas]

Yes, maybe. Seems like people are already doing a good job of providing templates for this sort of thing :)