search

postcss / postcss.org

Official website for PostCSS
https://postcss.org
MIT License
80 stars 49 forks source link

Added favicons #193

Closed marcustisater closed 8 years ago

marcustisater commented 8 years ago

Added initial favicon, might need improvement and some apple-touch-icons/android.

ai commented 8 years ago

We need 1 favicon.ico file with 32×32 and 1 .png file with 192×192.

Having png icons is not a good way. Browser by default loads favicon.ico even before it get a HTML. Having 32 and 16 sizes is not necessary, because browser can downscale 32 to 16 (file size is not really important here, because download time will be less than round trip).

marcustisater commented 8 years ago

Thank you for the feedback @ai. I'm not very framilar with the best practices of favicons, you learn something new everyday :wink:

marcustisater commented 8 years ago

Looks good now?

ai commented 8 years ago

Perfect. Only one issue. 192px version has some strange line on the right. Seems like graphic editor issue.

marcustisater commented 8 years ago

I took the one from brand and exported it through Sketch. Hmmm.

ai commented 8 years ago

Seems like it is Sketch issue. Compare it output with GitHub preview.

marcustisater commented 8 years ago

Yup, it's sketch. That's wired.

New one looks good?

ai commented 8 years ago

Yeap, now everything is good 😀

MoOx commented 8 years ago

Why did you choose those specific dimensions? Just curious about the best practices for favicons.

ai commented 8 years ago

@MoOx https://github.com/postcss/postcss.org/pull/193#issuecomment-195621778

MoOx commented 8 years ago

I saw this comment but on what data are you based on? Any source?

ai commented 8 years ago

@MoOx Are you need a respected authorized source? 😆 Sorry, it based on webdev discussion in Russian resources.

What questions do you have? What sizes you think also is important?

MoOx commented 8 years ago

Is a 32 favicon enough for "most" use cases? Some browsers can use higher res (eg: Firefox on iOS can use favicon and need at least 96px or something like that) For the by favicon: how does a 192 render on all devices (iPhone 4/5/6... Android *...)? I would like to find a ressource saying "if you need 2 icons just choose X and Y sizes, thoses are the best based on this benchs on [long list of browsers]" :)

ai commented 8 years ago

iOS uses 192 version. Firefox uses 32 version in tab and bookmark.

Devices can always downscale favicon. Because we don't have special low res version of logo we can use 192 version on all devices, they will just downscale it and have same result.

MoOx commented 8 years ago

Sorry but it's not that simple. 192 is not even mentionned in apple doc.

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

iPhone 6s Plus, iPhone 6 Plus 180px by 180px iPhone 6s, iPhone 6, iPhone SE 120px by 120px iPad Pro 167px by 167px iPad, iPad mini 152px by 152px

It's seems android need 2 dimenions (well if you want something optimized for android)

http://www.kylejlarson.com/blog/adding-an-icon-for-iphone-ipad-android-to-your-website/

The mess is resumed here https://mathiasbynens.be/notes/touch-icons but this may be outdated.

This website is interesting https://realfavicongenerator.net/ the project provides plugins for grunt/gulp etc & even have a webapi.

I guess there is no "simple" answer.

ai commented 8 years ago

192 for HiRes Android (as mentioned in your link article). Why we need more for touch? Other will downscale big one.

marcustisater commented 8 years ago

Yeah, favicon has become pain to figure out... I use http://realfavicongenerator.net/ for most projects but sometimes I think it's overdoing it with all these crazy new additions. 192x192px and 32x32px is fine.

I think Windows/IE has something called tiles 😫

thangngoc89 commented 8 years ago

This is a crazy list of favicon : https://github.com/VinSpee/vinspee.me/blob/master/web_modules/LayoutContainer/index.js

ai commented 8 years ago

@thangngoc89 yeap, this list is too long