Can one big iconic icon serve all devices and browsers?
All favicon discussions recommend creating icons of different sizes for different clients. See this answer for example: Is there a 32x32 or 16x16 icon?
My question is, is it really necessary to create icons with such different sizes? What if I created one large 200x200 icon? I can see that various browsers like Chrome and Firefox automatically scale it to display a rather scaled down icon in the browser tab.
What's the problem when going to one big 200x200 icon?
Note. I want the favicon to work on any device browser that conforms to the standard (if there is one for the favicon). For example, if iOS Safari violates the standard, I don't worry too much about supporting it.
source to share
No problem using one large high resolution icon (in 2017). Browsers and mobile devices with smaller screens made in the last 4 years automatically scale them attractively (if not perfectly) as needed.
The only drawback I can find for using one large icon - and that is stretching - is that mobile devices with lower resolution screens will download a slightly larger file than is absolutely necessary. We're talking about kilobytes here.
File size / download time:
-
Even with a 3G connection, the time it takes to download one 5kb favicon per 100kb favicon is negligible. If your 200x200 icon has a significantly larger file size than the lower resolution versions, it's perfectly okay to just create one high resolution favicon file and use it across all browsers / devices.
-
In fact, this is not even a load time issue as in most cases the icon will only load in the mobile browser when bookmarked and not loaded by the rest of the page.
iOS Safari / Android Chrome:
-
I have never personally experienced any problems using one big favicon in PNG format . You still want to include the Apple Touch Icon code (
<link rel="apple-touch-icon" href="/custom_icon.png">
) in addition to the normal favicon code, but you can use the same favicon image file. -
This look at how iOS Safari scales icons downwards seems to agree that deleting smaller icon file sizes is perfectly fine unless 100.0% pixel perfect is required.
-
I saw him pointing to several sites (caveat: in threads which a few years ago) that Apple themselves use one big 152x152 favicon for apple.com. File size: 4.5kb.
Although Apple uses 152x152 for its Apple Touch icon, I would recommend using the 192x192 favicon image because that resolution is used by Android Chrome .
TL; DR:
As far as I can tell, yes, one large icon can work on all modern devices and standards-compliant browsers . The difference in favicon file size of several kilobytes is mostly irrelevant today, so I can't find any problems with this approach.
source to share