Update icon

webapp/.gitignore

@@ -25,7 +25,5 @@ dist-ssr
 *.sw?
 
 # Generated assets
-public/apple-touch-icon*.png
 public/favicon.ico
-public/pwa*.png
+public/icon*.png
-public/maskable-icon*.png

webapp/index.html

@@ -7,8 +7,8 @@
 
     <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" sizes="180x180" />
+    <link rel="apple-touch-icon" href="/icon-180.png" sizes="180x180" />
-    <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#ffffff" />
+    <link rel="mask-icon" href="/icon-512.png" color="#ffffff" />
 
     <meta name="author" content="daylily" />
     <meta

webapp/public/favicon.svg

@@ -1,18 +1,19 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" id="svg1"
+<svg width="540" height="540" viewBox="-14 -14 540 540" 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 { fill: #ffffff; }
-    .fg-stroke { fill: none; stroke: #5a536b; }
+    .fg-stroke { fill: none; stroke: #ffffff; }
-    .bg { fill: #ffffff; }
+    .bg { fill: #0c0a09; }
-    @media (prefers-color-scheme: dark) {
+    @media (prefers-color-scheme: light) {
-        .fg { fill: #ffffff; }
+        .fg { fill: #0c0a09; }
-        .fg-stroke { fill: none; stroke: #ffffff; }
+        .fg-stroke { fill: none; stroke: #0c0a09; }
-        .bg { fill: #5a536b; }
+        .bg { fill: #ffffff; }
     }
     </style>
+    <rect class="bg" width="512" height="512" x="0" y="0" />
     <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" />

webapp/pwa-assets.config.ts

@@ -1,18 +1,26 @@
+import assert from 'assert'
 import { defineConfig } from '@vite-pwa/assets-generator/config'
 
 export default defineConfig({
   preset: {
     transparent: {
-      sizes: [64, 192, 512],
+      padding: 0,
+      sizes: [],
       favicons: [[48, 'favicon.ico']],
     },
     maskable: {
-      padding: 0.5,
+      padding: 0.348,
-      sizes: [512],
+      sizes: [64],
+      resizeOptions: { background: '#0c0a09' },
     },
     apple: {
-      padding: 0.5,
+      padding: 0.597,
-      sizes: [180],
+      sizes: [180, 192, 512],
+      resizeOptions: { background: '#0c0a09' },
+    },
+    assetName(_, size) {
+      assert(size.height === size.width)
+      return `icon-${size.width}.png`
     },
   },
   images: ['public/favicon.svg'],

webapp/src/App.svelte

@@ -6,7 +6,7 @@ import { Toaster } from 'svelte-sonner'
 </script>
 
 <svelte:head>
-  <meta name="theme-color" content={mode.current === 'dark' ? '#141211' : '#ffffff'} />
+  <meta name="theme-color" content={mode.current === 'dark' ? '#0c0a09' : '#ffffff'} />
 </svelte:head>
 
 <ModeWatcher />

webapp/vite.config.ts

@@ -12,25 +12,25 @@ const manifest: Partial<ManifestOptions> = {
   description: 'Utility for writing patterns to the “Inkclip” e-paper accessory.',
   categories: ['utilities'],
   display: 'standalone',
-  background_color: '#ffffff',
+  background_color: '#0c0a09',
   icons: [
     {
-      src: 'pwa-64x64.png',
+      src: 'icon-64.png',
       sizes: '64x64',
       type: 'image/png',
     },
     {
-      src: 'pwa-192x192.png',
+      src: 'icon-192.png',
       sizes: '192x192',
       type: 'image/png',
     },
     {
-      src: 'pwa-512x512.png',
+      src: 'icon-512.png',
       sizes: '512x512',
       type: 'image/png',
     },
     {
-      src: 'maskable-icon-512x512.png',
+      src: 'icon-512.png',
       sizes: '512x512',
       type: 'image/png',
       purpose: 'maskable',