fix(favicon): correct file type mismatch

[Rotzbua]

• add correct .ico variant
• change png to correct file type ending
• add size hints to html

[gustav87]

Hey! I'm not familiar with how favicons work. Tried to google as usual but didn't find a conclusive answer. Since this PR makes 2 favicons of different sizes, what's the logic for loading one or the other?

[Rotzbua]

The sizes is a hint for the browser to decide which resolutions of the favicon are available. Depending on the desired resolution the browser chose the correct favicon. The browser also can chose the bigger favicon and downsize it.

In practice the most requested icon should be the small size. The bigger should be only requested if a bigger icon is required e.g. the website pinned to home screen.

Indeed the information about favicon is a real mess. Most websites provide outdated recommendations from Internet Explorer era or around 2015 with the first PWAs. The current recommendation for new projects is to provide a svg/png favicon and a fallback favicon.ico (in rootfolder) for legacy endpoints.

• https://caniuse.com/link-icon-svg
• https://caniuse.com/link-icon-png

[gustav87]

Cool, thanks for the explanation. Approved!

[gustav87]

Hmm, my browser still loads the large favicon when trying it out on https://test.w3champions.com

EDIT: actually, it's loading the .ico, but https://w3champions.wc3.tools/test/site/favicon.ico?v=5 is still the large image. I'm not sure how that works. I'll have to ask someone more senior.

[Rotzbua]

The used CDN cloudflare caches the files to reduce the number of requests to the source server. If you add some random string to bust the cache the current file is provided:

https://w3champions.wc3.tools/test/site/favicon.ico?asdfasdf

I think in some hours the cache is automatically refreshed.

[gustav87]

Gotcha. Looking at the response headers on that file, the cache could be 7 days, but I'm not certain. Anyway, as you mentioned, it should resolve itself soon.

[gustav87]

It's already fetching the new file :+1: