optimize how we set the shortcut icon

[peterbe]

Part of #3611

Now, after the react-scripts has created the client/build/ with all the magic that create-react-app + webpack does, another script kicks in and "picks up the slack".
At the moment, the only thing it does is to post-process (aka. optimize) the <link rel="..." href="..."> tags' href value.
I.e.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

...becomes...

<link rel="shortcut icon" href="/favicon.323ad90c.ico" type="image/x-icon"/>

and it also copies the file client/build/favicon.ico to client/build/favicon.323ad90c.ico.

Now the Deployer will serve the URL https://developer.m.o/favicon.323ad90c.ico with a very aggressive Cache-Control which is safe to do because it's md5 hashed by the file itself.

[peterbe]

I pushed a complete build of this branch to Dev.
E.g. https://optimized-favicons.content.dev.mdn.mozit.cloud/en-US/docs/web/Javascript
Look at the web console (Network panel). Seems to work!

CC @escattone

[myakura]

If MDN doesn't need to (or no longer) support IE10 or lower, you can omit the shortcut part and the type attribute. <link rel="icon" href="path"> works across modern browsers (including IE11).

[myakura]

Does MDN still need to serve an ICO file for the favicon? If it doesn't need to support IE10 or lower, you can use PNG and that should cut down the bytes even further.

[peterbe]

Does MDN still need to serve an ICO file for the favicon? If it doesn't need to support IE10 or lower, you can use PNG and that should cut down the bytes even further.

So if we use <link rel="icon" href="path"> it'll work on all modern browsers, but the old ones might still fall back to the convention URL of /favicon.ico which we're not going to remove. Sounds great!

[myakura]

Here's a 48x48 PNG favicon, extracted from the current MDN favicon.ico using imagemagick:

And this is an optimized one, reducing color to 16 colors using Squoosh:

835 bytes → 373 bytes.

[peterbe]

I think I'd rather use that when the HTML can be used and my favicon.ico only to be used as a fallback.

[peterbe]

In about 1h https://optimized-favicons.content.dev.mdn.mozit.cloud/en-US/docs/web/Javascript should be working with the new update.

[peterbe]

@myakura Can you take look now? The Dev build isn't ready at the time of writing but once it is, I think we can check.

[myakura]

@peterbe I just checked with the preview and it works!

Both grab the 373 byte PNG icon which has longer cache TTL than what the current favicon does.

Checking out in IE11 was a bit tricky since the favicon request doesn't show up on devtools. But looking at the favicon cache, it seems to grab a 373 byte file so I believe it works on IE11 as well. Hope that helps.

C:\Users\myaku\Favorites>C:\Users\myaku\tools\Streams\streams.exe *

streams v1.60 - Reveal NTFS alternate streams.
Copyright (C) 2005-2016 Mark Russinovich
Sysinternals - www.sysinternals.com

C:\Users\myaku\Favorites\MDN Web Docs Dev.url:
         :favicon:$DATA 373
C:\Users\myaku\Favorites\MDN Web Docs.url:
         :favicon:$DATA 15086

[Gregoor]

Great stuff!