From da2d4f67e70132b1a8427c85bf7d661d77eae268 Mon Sep 17 00:00:00 2001
From: fabi <fabian.hamm@outlook.de>
Date: Tue, 18 Aug 2026 18:03:31 +0000
Subject: [PATCH] fix(icon): wedding rings, and delete the skeleton favicon
 behind them

The event is a wedding, so the camera icon becomes two interlocking bands. Drawn rather
than sourced: at 16px in a tab anything finer than the stroke turns to smudge, which is
why the camera it replaces was three shapes and no more. White on #8a6a2b, the event's
own theme_primary, so the icon, the site and the PWA chrome finally agree -- the
manifest's theme_color was still the #2563eb from the camera branding.

The rings span x 88-424 and y 139-373 including stroke, inside the centre-80% safe zone,
so an Android circle crop cannot clip them.

Also removes a second, competing icon declaration. `+layout.svelte` imported
`$lib/assets/favicon.svg` -- the orange Svelte logo from the project skeleton, which Vite
inlined as a data URI into the layout bundle -- and applied it via `<svelte:head>`. Which
of the two won was left to the browser: the link in app.html is parsed from the initial
HTML, this one is added at hydration, and Chrome keeps the former. So the skeleton logo
did not usually show, but nothing guaranteed that, and `ssr = false` means the branded
link is the only one present at first paint anyway. app.html is now the single source and
the skeleton asset is gone.
---
 frontend/src/lib/assets/favicon.svg  |  1 -
 frontend/src/routes/+layout.svelte   |  9 +++++----
 frontend/static/icon.svg             | 27 +++++++++++++++++----------
 frontend/static/manifest.webmanifest |  2 +-
 4 files changed, 23 insertions(+), 16 deletions(-)
 delete mode 100644 frontend/src/lib/assets/favicon.svg

diff --git a/frontend/src/lib/assets/favicon.svg b/frontend/src/lib/assets/favicon.svg
deleted file mode 100644
index cc5dc66..0000000
--- a/frontend/src/lib/assets/favicon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d03716a..732e3bf 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
 	import { initAuth, getToken, getUserId, clearPin } from '$lib/auth';
 	import { initTheme } from '$lib/theme-store';
@@ -227,9 +226,11 @@
 	});
 </script>
 
-<svelte:head>
-	<link rel="icon" href={favicon} />
-</svelte:head>
+<!-- NO `<svelte:head><link rel="icon">` here. There used to be one, pointing at
+     `$lib/assets/favicon.svg` — the orange Svelte logo from the project skeleton. Vite inlined it
+     as a data URI into the layout bundle and this block applied it AFTER hydration, so it beat the
+     branded `<link rel="icon">` in app.html and the tab showed the framework's logo on every page.
+     app.html is now the single source for the icon; the skeleton asset is deleted. -->
 
 {@render children()}
 
diff --git a/frontend/static/icon.svg b/frontend/static/icon.svg
index 8955de7..265b344 100644
--- a/frontend/static/icon.svg
+++ b/frontend/static/icon.svg
@@ -1,12 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="EventSnap">
-  <!-- Full-bleed brand background keeps the icon "maskable": safe content sits within the centre 80%. -->
-  <rect width="512" height="512" fill="#2563eb"/>
-  <g fill="none" stroke="#ffffff" stroke-width="22" stroke-linejoin="round" stroke-linecap="round">
-    <!-- Camera body -->
-    <rect x="116" y="172" width="280" height="200" rx="34"/>
-    <!-- Viewfinder bump -->
-    <path d="M212 172l24-34h40l24 34" fill="#ffffff" stroke="none"/>
-    <!-- Lens -->
-    <circle cx="256" cy="276" r="58"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="Hochzeit von Julia &amp; Jonas">
+  <!-- Full-bleed brand background keeps the icon "maskable": safe content sits within the centre 80%
+       (51.2-460.8). The rings span x 88-424 and y 139-373 including stroke, so an Android circle
+       crop cannot clip them. -->
+  <rect width="512" height="512" fill="#8a6a2b"/>
+  <!-- Two interlocking bands. Deliberately just the two rings: no gem, no shine, no inner bevel.
+       This renders at 16px in a browser tab, where any detail smaller than the stroke width turns
+       into a smudge — the same reason the camera icon this replaces was three shapes and no more. -->
+  <g fill="none" stroke="#ffffff" stroke-width="26">
+    <circle cx="205" cy="256" r="104"/>
+    <circle cx="307" cy="256" r="104"/>
+    <!-- The interlock. Both circles above are drawn whole, so the right band covers the left one at
+         BOTH crossings and they read as merely overlapping. Redrawing this arc of the left band —
+         the segment through the upper intersection at (256, 165.4) — puts it back on top there
+         while the right stays on top at the lower crossing, which is what makes them look linked
+         rather than stacked. Keep it in sync if either circle moves. -->
+    <path d="M214.1 152.4A104 104 0 0 1 290.2 196.3"/>
   </g>
 </svg>
diff --git a/frontend/static/manifest.webmanifest b/frontend/static/manifest.webmanifest
index 2ae8db7..0cc3447 100644
--- a/frontend/static/manifest.webmanifest
+++ b/frontend/static/manifest.webmanifest
@@ -8,7 +8,7 @@
 	"display": "standalone",
 	"orientation": "portrait",
 	"background_color": "#ffffff",
-	"theme_color": "#2563eb",
+	"theme_color": "#8a6a2b",
 	"icons": [
 		{
 			"src": "/icon.svg",