Link previews and a wizard in the tab

Sharing the game's URL now unfurls a proper card: Open Graph and
Twitter meta tags with a 1200x630 preview composed from the physical
set's own counter art — WIZ-WAR in tall caps over the parchment, the
tagline in script, a row of wizard, troll, and treasure tokens, and
the fan-project line beneath. The favicon becomes the purple wizard
in his black hat, cropped from the counter sheet; the your-turn
variant wears a red badge, replacing the old lettered SVGs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/index.html

@@ -4,6 +4,21 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wiz-War</title>
+    <meta name="description" content="A game of magical combat in a stone labyrinth. The classic 1993 sixth edition, faithfully reproduced — play free with friends, online or around one device." />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Wiz-War" />
+    <meta property="og:title" content="Wiz-War" />
+    <meta property="og:description" content="A game of magical combat in a stone labyrinth. The classic 1993 sixth edition, faithfully reproduced — play free with friends, online or around one device." />
+    <meta property="og:image" content="https://wizwar.104.236.96.198.sslip.io/og.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Wiz-War" />
+    <meta name="twitter:description" content="A game of magical combat in a stone labyrinth. The classic 1993 sixth edition, faithfully reproduced — play free with friends." />
+    <meta name="twitter:image" content="https://wizwar.104.236.96.198.sslip.io/og.png" />
+    <meta name="theme-color" content="#efe8d4" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Archivo+Narrow:wght@400;600&family=Courier+Prime&family=Caveat:wght@500;700&display=swap" rel="stylesheet" />

packages/web/src/App.svelte

@@ -630,14 +630,9 @@
        view.outOfTurnWindow?.playerId === view.you)) ||
     net.games.some((g) => g.yourTurn && g.roomId !== net.roomId),
   );
-  const FAVICON_IDLE =
-    "data:image/svg+xml," + encodeURIComponent(
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="%23171a20"/><text x="16" y="23" font-family="Georgia" font-size="19" font-weight="bold" fill="%23e9e1cb" text-anchor="middle">W</text></svg>`.replaceAll("%23", "#"),
-    );
-  const FAVICON_TURN =
-    "data:image/svg+xml," + encodeURIComponent(
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="%23171a20"/><text x="16" y="23" font-family="Georgia" font-size="19" font-weight="bold" fill="%23e9e1cb" text-anchor="middle">W</text><circle cx="25" cy="7" r="6" fill="%232e7d32"/></svg>`.replaceAll("%23", "#"),
-    );
+  // The purple wizard from the physical counter sheet; a red badge marks your turn.
+  const FAVICON_IDLE = "/favicon.png";
+  const FAVICON_TURN = "/favicon-turn.png";
   $effect(() => {
     document.title = anyTurnWaiting ? "● Your turn — Wiz-War" : "Wiz-War";
     let link = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;