Adds favicons!

[Shrinks99]

Closes #328

Changes

The app has favicons now!

Added:

• SVG
  • Changes to slightly brighter colours in dark mode for better contrast!
• Fallback ICO
• apple-touch-icon (some browsers also use this, not just iOS)
• Web manifest with app description
  • Two web manifest icon sizes should users add the app to their local launcher (Windows' Start or macOS' Dock / Launchpad
  • Lighting & render by @emma-sg, thanks!

The manifest and icons are copied to the root directory at build time by webpack. All of the dedicated ways of doing this seemed more complicated than this?

Screenshots

Caveats / Future

Could adjust the icon colours in dark mode and give it more contrast?

Todo (done!):

• Create app manifest
• Update manifest logos with ones that will match our app icons
• Optimize manifest logos
• Optimize SVG with SVGO

[SuaYoo]

Nice, bubbly! To format the webmanifest file you'll need to add it package.json:

  "lint-staged": {
    "*.{ts,js}": [
      "prettier --write",
      "eslint --fix --quiet"
    ],
-    "*.{html,css,json}": "prettier --write",
+    "*.{html,css,json,webmanifest}": "prettier --write"
  }

[Shrinks99]

Hey, that makes sense! Added.

[Shrinks99]

Added manifest icons from @emma-sg!