Includes 32x32 version to support retina displays HiDPI devices.
See Issue #1285
@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.)
Unfortunately we don't support that file type yet. Try image files less than 5MB.
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 :)
@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?
You can overwrite the commit by force pushing. But we can also cherry pick the second one.
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.
@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, @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.
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
Personally prefer the 1px down version too.
Current 16x16 version and @alrra's 1px-down 32x32 version on an HiDPI screen:
Okay, it's 32x32 the way we all want it. I goofed at squashing the commits, but @drublic can fix it. :P
HiDPI (32x32px) favicon.ico
32x32-only version. Tested in IE6+, Safari 4+, and the latest Chrome,
Firefox, and Opera.
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?
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.
What about the 24px and 64px versions - worth having as well?
@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.
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
@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.
@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
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.
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.
Yes, maybe. Seems like people are already doing a good job of providing templates for this sort of thing :)