Cleaned up favicons, PWA icon fixes

client/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/dev-dist
 
 # production
 /build

client/index.html

@@ -7,6 +7,9 @@
     <meta name="description" content="Spoolman - Keep track of your inventory of 3D-printer filament spools." />
     <meta name="robots" content="noindex,nofollow" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
     <script type="text/javascript" src="./config.js"></script>
     <title>Spoolman</title>
   </head>

client/vite.config.ts

@@ -1,49 +1,55 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
-import { VitePWA } from 'vite-plugin-pwa';
+import { VitePWA } from "vite-plugin-pwa";
 import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
   base: "",
-  plugins: [react(), svgr(),
-  VitePWA({
-    registerType: 'autoUpdate',
-    devOptions: {
-      enabled: true,
-    },
-    includeAssets: ['favicon.ico', 'favicon.svg', 'apple-touch-icon.png'],
-    manifest: {
-      name: "Spoolman",
-      short_name: "Spoolman",
-      description: "Keep track of your inventory of 3D-printer filament spools.",
-      "icons": [
-        {
-          "purpose": "maskable",
-          "sizes": "512x512",
-          "src": "icon512_maskable.png",
-          "type": "image/png"
-        },
-        {
-          "purpose": "any",
-          "sizes": "512x512",
-          "src": "icon512_rounded.png",
-          "type": "image/png"
-        },
-        {
-          "purpose": "any",
-          "sizes": "192x192",
-          "src": "icon192_rounded.png",
-          "type": "image/png"
-        }
-      ],
-      background_color: "#1F1F1F",
-      theme_color: "#DC7734",
-      display: "standalone",
-      start_url: "/",
-      scope: "/"
-    },
-    workbox: {
-      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
-    }
-  })],
-});
+  plugins: [
+    react(),
+    svgr(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        enabled: true,
+      },
+      includeAssets: ["favicon.ico", "favicon.svg", "apple-touch-icon-180x180.png"],
+      manifest: {
+        name: "Spoolman",
+        short_name: "Spoolman",
+        description: "Keep track of your inventory of 3D-printer filament spools.",
+        icons: [
+          {
+            src: "pwa-64x64.png",
+            sizes: "64x64",
+            type: "image/png",
+          },
+          {
+            src: "pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "maskable-icon-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+        background_color: "#1F1F1F",
+        theme_color: "#DC7734",
+        display: "standalone",
+        start_url: "/",
+        scope: "/",
+      },
+      workbox: {
+        maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+      },
+    }),
+  ],
+});