jungvonmatt / wekit

A Jamstack kit for Contentful, Hugo and Netlify.
https://www.wekit.dev
MIT License
14 stars 4 forks source link

Serve less favicons #64

Open peterschewe opened 1 year ago

peterschewe commented 1 year ago

The WEKit already does some things right and recommends only a few selected favicons - compared to the mass provided by favicon generators.

This article is a good guideline: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs#the-extremely-short-version

1) Our manifest file already follows this recommendation and only references two icon sizes ✅

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

2) We can delete the favicon-32x32.png file and remove the reference in head.html.

3) Link favicon.ico in head.html. Browsers actually automatically look in the root for the file, but we can then add a sizes="any" attribute. This fixes a bug on Chrome that otherwise prefers ICO instead of SVG.

4) Our favicon.ico is 16x16 in size. Recommended is 32x32.

5) TBD: Document this recommendation or link the article. Otherwise, the favicon generators are quickly used again.