diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 26b2369..46174ae 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg';
 	import InstallPrompt from './components/InstallPrompt.svelte';
 	import { onMount } from 'svelte';
 	import './layout.css';
@@ -11,16 +10,20 @@
 		if (!root) return;
 		const mq = window.matchMedia('(prefers-color-scheme: dark)');
 		root.setAttribute('data-theme', mq.matches ? 'dark' : 'light');
-		const handler = (e: MediaQueryListEvent) => {
-			root.setAttribute('data-theme', e.matches ? 'dark' : 'light');
-		};
+		const handler = (e: MediaQueryListEvent) => root!.setAttribute('data-theme', e.matches ? 'dark' : 'light');
 		mq.addEventListener('change', handler);
 		return () => mq.removeEventListener('change', handler);
 	});
 </script>
 
 <svelte:head>
-	<link rel="icon" href={favicon} />
+	<!-- Favicon -->
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+	<link rel="icon" type="image/png" sizes="192x192" href="/favicon.png" />
+	<!-- Theme color: matches --bg in light/dark theme -->
+	<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFF8F5" />
+	<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#110510" />
+	<meta name="color-scheme" content="dark light" />
 	<link rel="preconnect" href="https://fonts.googleapis.com" />
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
 	<link
diff --git a/static/favicon-32.png b/static/favicon-32.png
new file mode 100644
index 0000000..49228b9
Binary files /dev/null and b/static/favicon-32.png differ
diff --git a/static/favicon.png b/static/favicon.png
index d3d54c8..8e292e9 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/icon-256-dark.png b/static/icon-256-dark.png
new file mode 100644
index 0000000..5e5558d
Binary files /dev/null and b/static/icon-256-dark.png differ
diff --git a/static/icon-256-transparent.png b/static/icon-256-transparent.png
new file mode 100644
index 0000000..054d1bb
Binary files /dev/null and b/static/icon-256-transparent.png differ
diff --git a/static/icon-256.png b/static/icon-256.png
index 7f30850..054d1bb 100644
Binary files a/static/icon-256.png and b/static/icon-256.png differ
diff --git a/static/icon-512-dark.png b/static/icon-512-dark.png
new file mode 100644
index 0000000..60d42c9
Binary files /dev/null and b/static/icon-512-dark.png differ
diff --git a/static/icon-512-maskable.png b/static/icon-512-maskable.png
new file mode 100644
index 0000000..b206cfb
Binary files /dev/null and b/static/icon-512-maskable.png differ
diff --git a/static/icon-512-transparent.png b/static/icon-512-transparent.png
new file mode 100644
index 0000000..b9ee78e
Binary files /dev/null and b/static/icon-512-transparent.png differ
diff --git a/static/icon-512.png b/static/icon-512.png
index 061552f..b9ee78e 100644
Binary files a/static/icon-512.png and b/static/icon-512.png differ
diff --git a/static/manifest.json b/static/manifest.json
index cb682a7..20632fe 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -11,13 +11,19 @@
       "src": "/favicon.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
     },
     {
       "src": "/icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "share_target": {