Can one large size favicon serve all devices and browsers?

Question

All discussion about favicons recommend creating favicons of different sizes to target different clients. See this answer for example: Does a favicon have to be 32x32 or 16x16?

My question: Is it really necessary to generate favicons with so many different size? What if I created one large favicon of size 200x200? I see various browsers like Chrome and Firefox automatically scaling it down to display a pretty scaled-down favicon in the browser tab.

What's the problem in going for one large favicon of size 200x200 then?

Note: I want the favicon to work on any device browser that conforms to the standard (if there is one for favicon). For example, if iOS Safari violates the standard then I am not too bothered with supporting it.

Answer 1

There is no problem with using one large high-resolution icon (in 2017). Browsers and mobile devices with smaller screens made in the last 4 years will automatically scale them down attractively (if not perfectly) as needed.

The only downside I can find for using one large favicon—and it's a stretch—is that mobile devices with lower resolution screens will download a slightly larger file than is absolutely necessary. We're talking kilobytes here.

File Size/Loading Time:

• Even on a 3G connection, the time it takes to download a single 5kb favicon vs a 100kb favicon is negligible. Unless your 200x200 favicon has a much larger file size than the lower resolution versions, it's perfectly okay to just create one high-resolution favicon file and use that for all browsers/devices.

• This isn't really even a load time issue, because in most cases the favicon would only be downloaded on a mobile browser when it's bookmarked rather than loading with the rest of the page.

iOS Safari/Android Chrome:

• I've never personally experienced any issues using a single large favicon image in PNG format. You'd 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 down icons seems to agree that dropping the smaller icon file sizes is completely fine if 100.0% pixel perfection is not needed.

• I've seen it pointed out on a number of sites (caveat: in threads that are a few years old) that Apple themselves use one large 152x152 favicon for apple.com. The file size is 4.5kb.

Although Apple uses 152x152 for their Apple Touch Icon, I'd recommend going with a 192x192 favicon image because this resolution is used by Android Chrome.

TL;DR:

As far as I can tell, yes, one large size favicon can work on all modern devices and browsers that conform to standards. The difference in favicon file size of a few kilobytes is mostly irrelevant today, thus I cannot find any problems with this approach.

Answer 2

The question you referred is 3 years old and nowadays I'd (and I usually am) create one, high res favicon and assume browsers would (and from my experience it will) scale it down if needed.