-
Notifications
You must be signed in to change notification settings - Fork 500
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
optimize how we set the shortcut icon #3621
Conversation
I pushed a complete build of this branch to Dev. CC @escattone |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).
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 |
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. |
I think I'd rather use that when the HTML can be used and my |
In about 1h https://optimized-favicons.content.dev.mdn.mozit.cloud/en-US/docs/web/Javascript should be working with the new update. |
@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.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great stuff!
* optimize how we set the shortcut icon Part of mdn#3611 * fix eslint problem * fix scripts * use logger.info instead * add favicon-48x48.png for the new default favicon * add a test
Part of #3611
Now, after the
react-scripts
has created theclient/build/
with all the magic thatcreate-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.
...becomes...
and it also copies the file
client/build/favicon.ico
toclient/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.