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

Merged
merged 1 commit into from Jan 10, 2013

Projects

None yet

9 participants

@jonathantneal
H5BP member

Includes 32x32 version to support retina displays HiDPI devices.

See Issue #1285

@alrra
H5BP member

@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
H5BP member

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
H5BP member

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

favicon-32x32

@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
H5BP member

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

@jonathantneal
H5BP member

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
H5BP member

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

2d4a22b6-5aa3-11e2-9b70-309691723979

(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
@jonathantneal
H5BP member

@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
H5BP member

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

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

Personally prefer the 1px down version too.

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

screenshot

@jonathantneal
H5BP member

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

Merge!

@alrra alrra referenced this pull request Jan 10, 2013
Closed

HiDPI (32x32px) favicon.ico #1285

@jonathantneal jonathantneal HiDPI (32x32px) favicon.ico
32x32-only version. Tested in IE6+, Safari 4+, and the latest Chrome,
Firefox, and Opera.
21702c4
@jonathantneal jonathantneal merged commit fb91664 into h5bp:master Jan 10, 2013
@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
H5BP member

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

@drublic drublic referenced this pull request in h5bp/mobile-boilerplate Jan 21, 2013
Closed

Include HiDPI version of favicon. #155

@paulirish
H5BP member
@jonrandahl
@jonathantneal
H5BP member

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
@drublic
H5BP member

@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
H5BP member

@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
@necolas
H5BP member

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
@necolas
H5BP member

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

@szinya szinya referenced this pull request in menthainternet/sitebuild Oct 10, 2013
@pepe-mentha pepe-mentha favicon replaced 8b30ae9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment