Aspnetcore: The favicon.ico in the templates is needlessly big

[DamianEdwards]

The favicon.ico file currently used in all of our project templates is pretty big by favicon standards at 31.2 KB. In fact, yslow recommends a size less than 1 KB, however a quick look at some big properties shows sizes bigger than that but still much smaller than our default:

Site | Icon size
--- | ---
google.com | 5.3 KB
microsoft.com | 17.2 KB
stackoverflow.com | 5.5 KB
our template | 31.2 KB

Cracking open the Google favicon.ico reveals they have only two sizes embedded: 32x32@32-bit and 16x16@32-bit. Our default has two more sizes beyond that: 48x48 and 64x64.

Reducing ours to match Google's (seems like a reasonable default) drops the size to match theirs (as expected) at 5.3 KB so we should likely just do that.

The smaller, optimized ICO file is in this ZIP: favicon.zip

[dlemstra]

An extra optimization would be to change the semi transparent pixels and make them either fully opaque or fully transparent. And together with a reduction of the number of colors would allow the use of a color pallete instead. If this file is optimized using that technique the size can be reduced to 3.5 KB. So you might want to consider to use this file instead: new-favicon.zip. With this technique there is a small loss in quality but I am really unable to see the difference here.

[DamianEdwards]

@dlemstra yeah I briefly looked at that, but it seems it can result in odd artifacts in some cases, see this screenshot from just now on my machine where the file you uploaded has a dark pixel in the upper right corner when rendered in explorer, even though it doesn't appear there in an icon editor.

[DamianEdwards]

And to reiterate, I figure that as far as a default goes, if we're the same size as Google, that's a pretty good place to be.

[JesperTreetop]

The attention to detail in reducing the size of the favicon is appreciated.

Personally I think it would be even better to consider dropping the default favicon.ico. It's meant to be able to be used to identify a site or complement a site's branding, and there are already millions of sites with this favicon in it with nothing more in common than their platform technology. Embedding, say, a theme with Bootstrap and CSS gets you going towards building something and you can use it as a starting point and customize it with your branding; all you can do with a favicon is to replace it in its entirety.

[DamianEdwards]

@JesperTreetop removing it results in 404s as browsers will attempt to request it regardless. I very much dislike seeing our default templates result in errors being displayed in the browser dev consoles.

[JesperTreetop]

That's a fair point. Doesn't that happen for apple-touch-icon.png and other such images too?

Edit: It looks like a link tag can be provided to prevent the favicon.ico from being requested, but that would probably be surprising to people putting in an actual favicon.ico not knowing to remove that tag and not getting it to work.

[pranavkm]

Thanks @heyitstanyado!