search

pelias / design

Branding & graphic design guidelines and assets
2 stars 0 forks source link

crisper favicon icons? #9

Open missinglink opened 4 years ago

missinglink commented 4 years ago

Hi @elioqoshi

These favicons looks a little blurry to my eye (compared to the vector), is there some way we could crisp them up a bit?

Screenshot 2020-05-11 at 13 35 04
elioqoshi commented 4 years ago

Hmm that's weird. It might be some anti-aliasing setting in the PNG export. Are you sure these are using the same resolution? Can you send the PNG's you used separately here?

cc @ergish

missinglink commented 4 years ago

It's literally just a screenshot of https://github.com/pelias/design#favicons you can click on them to see which is which.

This is the big one: https://github.com/pelias/design/blob/master/logo/pelias/Favicon/Favicon-PNG/Favicon_64x64.png

missinglink commented 4 years ago

Is it maybe because I'm on a retina display?

missinglink commented 4 years ago

Agh yeah that's it, I dragged the window to my second monitor and took another screenshot:

Screenshot 2020-05-12 at 14 17 44

[edit] ooor... not? I'm confused

ergish commented 4 years ago

Hi @missinglink

I just checked the files again to be sure. The exported PNG files are PNG-24, so there's nothing left to do to make them look sharper. The second image looks ok so it may be caused by the different scaling and resolutions of the displays.

I would personally recommend using SVG files in this case. They will look sharp in any display, resolution, or "zoom in" situation.

elioqoshi commented 4 years ago

I would personally recommend using SVG files in this case. They will look sharp in any display, resolution, or "zoom in" situation.

I don't think SVG is possible for favicons usually.

But yeah, I think it's the retina display @missinglink, I get the same issue on my Mac.

ergish commented 4 years ago

Yeah, I also wasn't sure about it but it seems they are supported.