Use an actual logo

webapp/package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "pnpm run generate-pwa-assets && vite build",
     "preview": "vite preview",
-    "generate-pwa-assets": "pwa-assets-generator --preset minimal-2023 public/favicon.svg"
+    "generate-pwa-assets": "pwa-assets-generator"
   },
   "devDependencies": {
     "@fontsource-variable/ibm-plex-sans": "^5.2.8",

webapp/public/favicon.svg

@@ -1,4 +1,39 @@
-<svg version="1.1" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-  <polygon points="0,0 256,0 0,256" fill="#afbabc" />
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
-  <polygon points="256,256 256,0 0,256" fill="#182435" />
+<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" id="svg1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:svg="http://www.w3.org/2000/svg">
+    <style>
+    .fg { fill: #5a536b; }
+    .fg-stroke { fill: none; stroke: #5a536b; }
+    .bg { fill: #ffffff; }
+    @media (prefers-color-scheme: dark) {
+        .fg { fill: #ffffff; }
+        .fg-stroke { fill: none; stroke: #ffffff; }
+        .bg { fill: #5a536b; }
+    }
+    </style>
+    <rect class="fg-stroke" stroke-width="64" width="448" height="448" x="32" y="32" />
+    <circle class="fg" cx="64" cy="448" r="64" />
+    <circle class="fg" cx="64" cy="320" r="64" />
+    <circle class="fg" cx="64" cy="192" r="64" />
+    <circle class="fg" cx="64" cy="64" r="64" />
+    <circle class="fg" cx="128" cy="128" r="54" />
+    <circle class="fg" cx="128" cy="256" r="54" />
+    <circle class="fg" cx="128" cy="384" r="54" />
+    <circle class="fg" cx="192" cy="64" r="44" />
+    <circle class="fg" cx="192" cy="192" r="44" />
+    <circle class="fg" cx="192" cy="320" r="44" />
+    <circle class="fg" cx="192" cy="448" r="44" />
+    <circle class="fg" cx="256" cy="128" r="34" />
+    <circle class="fg" cx="256" cy="256" r="34" />
+    <circle class="fg" cx="256" cy="384" r="34" />
+    <circle class="fg" cx="320" cy="64" r="24" />
+    <circle class="fg" cx="320" cy="192" r="24" />
+    <circle class="fg" cx="320" cy="320" r="24" />
+    <circle class="fg" cx="320" cy="448" r="24" />
+    <circle class="fg" cx="384" cy="128" r="14" />
+    <circle class="fg" cx="384" cy="256" r="14" />
+    <circle class="fg" cx="384" cy="384" r="14" />
+    <rect class="fg" width="50" height="315" x="37" y="92" />
 </svg>

webapp/pwa-assets.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  preset: {
+    transparent: {
+      sizes: [64, 192, 512],
+      favicons: [[48, 'favicon.ico']],
+    },
+    maskable: {
+      padding: 0.5,
+      sizes: [512],
+    },
+    apple: {
+      padding: 0.5,
+      sizes: [180],
+    },
+  },
+  images: ['public/favicon.svg'],
+})

webapp/tsconfig.node.json

@@ -21,5 +21,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
   },
-  "include": ["vite.config.ts"],
+  "include": ["vite.config.ts", "pwa-assets.config.ts"],
 }

webapp/vite.config.ts

@@ -29,6 +29,12 @@ const manifest: Partial<ManifestOptions> = {
       sizes: '512x512',
       type: 'image/png',
     },
+    {
+      src: 'maskable-icon-512x512.png',
+      sizes: '512x512',
+      type: 'image/png',
+      purpose: 'maskable',
+    },
   ],
 }