Add maskable icons to manifest

[beaufortfrancois]

This PR adds missing maskable icons to the web app manifest as suggested by Lighthouse.

Issue: #142

[dero]

These icons look good. Tested in Chrome DevTools.

(But I do find it a bit funny that in order to avoid devices adding padding and white background to our icons, we... add padding and white background to our icons. 😉)

[beaufortfrancois]

At least we control the padding ;)
See https://web.dev/maskable-icon/

[derekherman]

The padding I understand, but why the white background?

[beaufortfrancois]

Which other color would you use? White seems appropriate to me.
I don't see how no color would match the triangle shape of the icon as well.

[derekherman]

My understanding is that the background should be completely filled or have none as there are different icon shapes like square, teardrop, round rectangle, and squircle that the icon can be shown in. If the background is a white circle but the theme color is dark wouldn't the icon be partially white and then outside of the circle it would be the theme color?

[dero]

@derekherman The icon background is completely filled. DevTools only previews the icon as a circle, because that is the maximum amount of crop that can be applied.

[beaufortfrancois]

FYI I used https://maskable.app/ to create this maskable icon for kinoweb.dev.

[derekherman]

I see. Shouldn’t the background color be the theme color of the app then? It looks best on that dark background.

[beaufortfrancois]

I'm not sure I like the dark background. Note that Google apps all use white background.

[derekherman]

We can leave it with the white background.