Add fingerprinting to favicons to bust browser caching

[devneill]

After learning about asset imports and how fingerprints are used to bust the browser cache, I noticed that the epic stack doesn't do this for it's favicons.

This change adds fingerprinting to the favicon file imports in the root so users will always see the latest favicons in their browser.

Notes

• I see we only import favicon-32x32.png as an alternate favicon, but not favicon-16x16.png. Do we need that file?
• The android-chrome-* favicons are referenced via the site.webmanifest file and not imported via the root, so I left them in /public, along with the default favicon.ico. Is that fine? or should I try to fingerprint these as well somehow?
• I see the newly fingerprinted favicons are now being inlined as base64 strings. Should I add something to

  epic-stack/vite.config.ts

  Line 18 in 002c436

  assetsInlineLimit: (source: string) => {

  so that they are not inlined?

Test Plan

• test locally in development and in a production build

Checklist

• Tests updated
• Docs updated

Screenshots

[devneill]

If this change makes sense then I can also update the associated README 👍🏻

[kentcdodds]

Honestly, favicons are such a mystery to me. They have their own special rules and you can really go wild with the number of files you seem to have to include. I really wish we could do something simpler. Let's go with the least amount of work solution. Could you do a little research to determine what would be the best combination of effort and benefit? I think fingerprinting them is a good idea. I just don't want a thousand imports for stuff.

Also, I know browsers will often look for a /favicon.ico by default so we'll want to make sure we keep at least one file there.

[devneill]

Ok, after some research, here are some optimisations I believe we can make:

Remove mask-icon

"Safari formerly had a requirement of SVG monochrome icon for pinned tabs. However, since Safari 12, we can use a regular favicon for pinned tabs. Even apple.com doesn’t use the mask-icon anymore."

Remove png alternate icons

It seems that between an ico, svg and the dedicated pngs for apple and chrome devices, we have enough coverage for most cases, while keeping the number of files to a minimum. (See first source for more info).

We need to include the sizes attribute for the favicon.ico import

This avoids a chrome bug where the ico is favoured over an svg - I tested this locally and it is still the case. It needs to be a specific size value, not just any

We cannot fingerprint the favicon.ico

"Don’t get smart with the folder static asset folder structure and cache busters. https://example.com website should have a favicon on https://example.com/favicon.ico. Some tools, like RSS readers, just request /favicon.ico from the server and don’t bother looking elsewhere."

Sources:
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs - this seems to be the most up to date

https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7
https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon
https://caniuse.com/?search=favicon

[devneill]

I've made changes based on the research above.

Let me know if I've missed anything 🙏🏻

[kentcdodds]

Thank you!

[kentcdodds]

I seriously appreciate the time you spent researching this and contributing back!