Our favicon.ico is 15KB!

[peterbe]

The file favicon-32x32.png is 789 bytes. The favicon.ico is 15086 bytes. Yikes!

[peterbe]

In the last month, according to https://console.aws.amazon.com/cloudfront/home?region=us-west-2#popular_urls:
we have sent ~348 GB from the CDN servers to people's browsers.
It's 24,528,608 requests (92.85% CDN cache hit ratio).

If the file was 789 bytes instead, we'd only be sending ~18GB from the CDN servers to people's browsers.
But I think we can do better than that!
The /favicon.ico file is only cached for 86400 seconds (1 day) whereas any file with a hash in it gets cached for 31536000 seconds (1 year). So there's a grand chance that some people, who visit MDN pretty often will download that URL over and over because their browser's cache considers it too stale. If we set the favicon ico URL in the HTML meta tags, we can force the right PNG and give that a hashed filename.

On top of that, at a 1 day TTL it also means that each CDN server will only cache it on their end for 1 day. That means it will more frequently wake up S3 to look it up and have it transferred from S3 to the CDN. This is also part of the electricity waste.

[peterbe]

#3621 takes care of "forcing" people to download /favicon.[hash].ico instead of the default /favicon.ico (which is what the browser downloads unless the <link rel="shortcut icon"> is set in the HTML.
Now, because of the hash, we can cache the favicon image much more aggressively in the CDN and in people's browsers. That's the best form of optimizing; make it so you never have to download the image at all :)

[peterbe]

#3620 takes care of making the default favicon.ico itself smaller.

But there's still something I don't understand. Look at our index.html and you'll see something like this:

    <link
      rel="shortcut icon"
      href="/favicon.323ad90c.ico"
      type="image/x-icon"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="144x144"
      href="/favicon144.e7e21ca2.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="114x114"
      href="/favicon114.d526f38b.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="72x72"
      href="/favicon72.cc65d1d7.png"
    />
    <link rel="apple-touch-icon-precomposed" href="/favicon57.de331799.png" />

(the hashing of filenames isn't important right now)

But why does my Firefox download both the /favicon.323ad90c.ico and the /favicon144.e7e21ca2.png??
Besides that is that favicon image? It looks like the old logo from eons ago: https://developer.mozilla.org/favicon144.png
I can only imagine it's because that one appears first in of all the <link rel="apple-touch-icon-precomposed"> tags.

It appears to only happen in Firefox (Nightly?) and not in Chrome where most traffic comes from.

But /favicon144.png is still the 32 most comment object in our CDN at 7M request (in the last 30 days) causing over 10GB worth of CDN-to-client traffic (in the last 30 days).

I don't know the origin of the favicon144.png file. Or any of the blue-background PNG images for that matter!

I wonder if we can just delete them all and just use 1 image (white dino head on black background) called apple-touch-icon.png) which might be necessary to satisfy Safari devices (e.g. Safari iOS).

[peterbe]

Curious thing. When I run Chrome from Webpagetest.org I see that it downloads the /manifest.json and the /android-chrome-512x512.png file. Not sure why but it kinda makes sense since Chrome might poke in there if the file is set.
However, in my Chrome 90 on my laptop, it never downloads that.

[myakura]

@peterbe given that #3620 #3621 and #3622 are all merged to main, I guess it can be closed?

I'm kinda curious if those changes has made a (positive) impact to MDN, in particular:

• did switching main favicon from 15KB ICO to 373B PNG work? how much bandwidth MDN could save further?
• do older clients still get to the fallback /favicon.ico; if so, how much?
• did the CDN cache hit rate improve?

[peterbe]

From ~348GB to ~316MB. So 1000x is a good amount of saved electricity.

I would call that a win!
Thank you so much @myakura You have helped the world's carbon footprint.

[schalkneethling]

@peterbe as @myakura asked, shall we close? I reckon this is resolved.

[myakura]

@peterbe WOW. That's way more than I imagined. Thanks!