Add maskable and monochrome icon variants (#11762)

* Add maskable and monochrome icon variants

* Optimised images with calibre/image-actions

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

server/routes/app.ts

@@ -160,9 +160,21 @@ export const renderApp = async (
     <link
       rel="apple-touch-icon"
       type="image/png"
-      href="${env.CDN_URL ?? ""}/images/apple-touch-icon.png"
+      href="${env.CDN_URL ?? ""}/images/icon-maskable-192.png"
       sizes="192x192"
     />
+    <link
+      rel="apple-touch-icon"
+      type="image/png"
+      href="${env.CDN_URL ?? ""}/images/icon-maskable-512.png"
+      sizes="512x512"
+    />
+    <link
+      rel="apple-touch-icon"
+      type="image/png"
+      href="${env.CDN_URL ?? ""}/images/icon-maskable-1024.png"
+      sizes="1024x1024"
+    />
     <link
       rel="search"
       type="application/opensearchdescription+xml"

vite.config.ts

@@ -115,12 +115,35 @@ export default () =>
               sizes: "512x512",
               type: "image/png",
             },
-            // last one duplicated for purpose: 'any maskable'
             {
-              src: "/images/icon-512.png",
+              src: "/images/icon-maskable-192.png",
+              sizes: "192x192",
+              type: "image/png",
+              purpose: "maskable",
+            },
+            {
+              src: "/images/icon-maskable-512.png",
               sizes: "512x512",
               type: "image/png",
-              purpose: "any maskable",
+              purpose: "maskable",
+            },
+            {
+              src: "/images/icon-maskable-1024.png",
+              sizes: "1024x1024",
+              type: "image/png",
+              purpose: "maskable",
+            },
+            {
+              src: "/images/icon-monochrome-512.png",
+              sizes: "512x512",
+              type: "image/png",
+              purpose: "monochrome",
+            },
+            {
+              src: "/images/icon-monochrome-1024.png",
+              sizes: "1024x1024",
+              type: "image/png",
+              purpose: "monochrome",
             },
           ],
         },