Closed marcustisater closed 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).
Thank you for the feedback @ai. I'm not very framilar with the best practices of favicons, you learn something new everyday :wink:
Looks good now?
Perfect. Only one issue. 192px version has some strange line on the right. Seems like graphic editor issue.
I took the one from brand and exported it through Sketch. Hmmm.
Seems like it is Sketch issue. Compare it output with GitHub preview.
Yup, it's sketch. That's wired.
New one looks good?
Yeap, now everything is good 😀
Why did you choose those specific dimensions? Just curious about the best practices for favicons.
I saw this comment but on what data are you based on? Any source?
@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?
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]" :)
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.
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.
192 for HiRes Android (as mentioned in your link article). Why we need more for touch? Other will downscale big one.
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 😫
This is a crazy list of favicon : https://github.com/VinSpee/vinspee.me/blob/master/web_modules/LayoutContainer/index.js
@thangngoc89 yeap, this list is too long
Added initial favicon, might need improvement and some apple-touch-icons/android.