Use the new app icon everywhere

Source artwork committed as assets/app-icon-source.jpeg (1024x1024 navy
rounded square) and scripts/make-icons.mjs rewritten to render every icon
from it with headless Chromium:

- The master is masked at full resolution first (a rounded rect 4px inside
  the artwork's own radius), so the JPEG's anti-aliased white edge never
  survives and small sizes downscale with clean alpha.
- PWA icons (192/512) and favicon-32 keep the rounded square with
  transparent corners; apple-touch 180/167/152 are full-bleed (iOS paints
  transparency black) with the artwork zoomed 20% to crop its corners;
  maskable-512 keeps the artwork inside the 80% safe circle on a matching
  navy field.
- iOS splash screens regenerated with the new mark.
- app/favicon.ico regenerated (PNG payload in an ICO container); the old
  app/icon.svg removed so the browser tab can't fall back to it.
- Install sheet's app card now shows the real icon, so the home-screen
  icon is recognisable.
- Service worker CACHE_VERSION bumped to freezmo-v3 so installed clients
  pick up the new assets.
- README updated (source artwork + script description).

Verified: pwa 16/16, install sheet 64/64, final ux 12/12, key gate 49/49,
zoom 6/6; every icon route serves 200 and the manifest/head reference the
new files.

README.md

@@ -417,14 +417,15 @@ What's included:
 | Piece | Detail |
 | --- | --- |
 | `app/manifest.ts` | `display: standalone`, portrait, theme/background colours, app shortcuts |
-| Icons | 192/512 px, a maskable 512 px icon, and 180/167/152 px `apple-touch-icon`s |
+| Icons | 192/512 px, a maskable 512 px icon, and 180/167/152 px `apple-touch-icon`s, all rendered from `assets/app-icon-source.jpeg` |
 | iOS meta | `apple-mobile-web-app-capable`, `-title`, `-status-bar-style`, `viewport-fit=cover` |
 | Service worker | `public/sw.js`, **production only**: cached app shell, stale-while-revalidate for static assets, network-first navigations with an `/offline` fallback. `/api/*` is never cached |
 | Offline page | `/offline` — "your decks are still here, reconnect to generate" |
 | Safe areas | `pb-safe` / `pt-safe` utilities plus `pb-tabbar` so nothing hides behind the tab bar |
 
-The icons are generated by `scripts/make-icons.mjs` (headless Chromium); it is a one-off tool and
-is not part of the app's dependencies.
+The icons are generated by `scripts/make-icons.mjs` from `assets/app-icon-source.jpeg` (headless
+Chromium); it is a one-off tool and is not part of the app's dependencies. It also writes
+`app/favicon.ico`, the Next.js file convention for the browser tab.
 
 ## Security notes
 
@@ -574,9 +575,11 @@ lib/
 public/
   sw.js                  service worker (production only)
   icons/                 PWA + iOS icons and splash screens
+assets/
+  app-icon-source.jpeg   master artwork the icons are rendered from
 scripts/
   copy-pdf-worker.mjs   copies the pdf.js worker to /public (runs on predev/prebuild)
-  make-icons.mjs        regenerates the PWA/iOS icons (one-off tool)
+  make-icons.mjs        regenerates the PWA/iOS icons from the master (one-off tool)
 ```
 
 ---

app/icon.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-  <defs>
-    <linearGradient id="frost" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#38bdf8" />
-      <stop offset="100%" stop-color="#0369a1" />
-    </linearGradient>
-  </defs>
-  <rect width="64" height="64" rx="16" fill="url(#frost)" />
-  <g stroke="#ffffff" stroke-width="3.4" stroke-linecap="round" fill="none">
-    <path d="M32 12v40M14.7 22l34.6 20M49.3 22 14.7 42" />
-    <path d="M32 20.5 26.8 15.3M32 20.5l5.2-5.2M32 43.5l-5.2 5.2M32 43.5l5.2 5.2" />
-    <path d="M20.7 27.5l-6.6-1.7M20.7 36.5l-6.6 1.7M43.3 27.5l6.6-1.7M43.3 36.5l6.6 1.7" />
-  </g>
-</svg>

components/InstallSheet.tsx

@@ -12,7 +12,6 @@ import {
   EllipsisIcon,
   PlusIcon,
   ShareIcon,
-  SnowflakeIcon,
   XIcon,
 } from "@/components/icons";
 import { Spinner } from "@/components/ui";
@@ -269,12 +268,13 @@ export function InstallSheet() {
 
                 {/* app card */}
                 <div className="mt-1 flex items-center gap-3 rounded-2xl border border-[var(--install-border)] bg-[var(--install-card)] p-3">
-                  <span
+                  {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
+                  <img
+                    src="/icons/icon-192.png"
+                    alt=""
                     aria-hidden
-                    className="grid size-11 shrink-0 place-items-center rounded-xl bg-[var(--text)] text-[var(--page)] dark:border dark:border-[var(--install-border)] dark:bg-[var(--install-chip)] dark:text-[var(--text)]"
-                  >
-                    <SnowflakeIcon className="size-5" />
-                  </span>
+                    className="size-11 shrink-0 rounded-[11px]"
+                  />
                   <span className="min-w-0">
                     <span className="block text-[15px] font-semibold leading-tight text-[var(--text)]">
                       Freezmo

public/sw.js

@@ -9,7 +9,7 @@
  *
  * Bumping CACHE_VERSION is how a new deploy invalidates old assets.
  */
-const CACHE_VERSION = "freezmo-v2";
+const CACHE_VERSION = "freezmo-v3";
 const SHELL_CACHE = `${CACHE_VERSION}-shell`;
 const ASSET_CACHE = `${CACHE_VERSION}-assets`;
 

scripts/make-icons.mjs

@@ -1,64 +1,121 @@
 /**
- * Renders the Freezmo app icons (PWA + iOS) with headless Chromium.
- * Run: node scripts/make-icons.mjs  (requires the Playwright browser cache)
+ * Renders the Freezmo app icons (PWA + iOS) from the master artwork with
+ * headless Chromium.
+ * Run: node scripts/make-icons.mjs  (requires a Playwright Chromium cache)
+ *
+ * Master: assets/app-icon-source.jpeg — a 1024x1024 navy rounded square.
+ *   1. The master is masked at full resolution first (a rounded rect 4px
+ *      inside the artwork's own corner radius), so the JPEG's anti-aliased
+ *      white edge never survives and small sizes downscale with clean alpha.
+ *   2. "any" icons use that masked master as-is.
+ *      Apple touch icons are full-bleed, because iOS paints transparency
+ *      black; the artwork is zoomed 20% so its corners fall outside the
+ *      square (the master's corners are ~85px, so nothing else is cropped).
+ *      The maskable icon keeps the artwork inside the 80% safe circle on a
+ *      matching navy field.
+ * Also writes app/favicon.ico, the Next.js file convention for the browser
+ * tab (the larger sizes are declared in app/layout.tsx metadata).
  */
 import { chromium } from "playwright-core";
-import { mkdirSync, existsSync } from "node:fs";
+import { mkdirSync, existsSync, readFileSync, writeFileSync } from "node:fs";
 
 const CHROME = process.env.CHROME ?? "/home/martin/.cache/ms-playwright/chromium-1243/chrome-linux64/chrome";
-const OUT = new URL("../public/icons/", import.meta.url).pathname;
+const ROOT = new URL("../", import.meta.url).pathname;
+const OUT = `${ROOT}public/icons/`;
+const SOURCE = `${ROOT}assets/app-icon-source.jpeg`;
 mkdirSync(OUT, { recursive: true });
 
-const SNOWFLAKE = (size, stroke, inset) => `
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="${size}" height="${size}">
-    <g transform="translate(${inset},${inset}) scale(${(64 - inset * 2) / 64})"
-       stroke="#ffffff" stroke-width="${stroke}" stroke-linecap="round" fill="none">
-      <path d="M32 12v40M14.7 22l34.6 20M49.3 22 14.7 42" />
-      <path d="M32 20.5 26.8 15.3M32 20.5l5.2-5.2M32 43.5l-5.2 5.2M32 43.5l5.2 5.2" />
-      <path d="M20.7 27.5l-6.6-1.7M20.7 36.5l-6.6 1.7M43.3 27.5l6.6-1.7M43.3 36.5l6.6 1.7" />
-    </g>
-  </svg>`;
+/** Sampled from the master artwork: background colour, size, corner radius. */
+const NAVY = "#101528";
+const SIZE = 1024;
+const CORNER = 253;
+const ERODE = 4; // keeps the clip inside the artwork's anti-aliased edge
 
-function pageHtml({ size, radius, inset, background, stroke }) {
+const sourceUri = `data:image/jpeg;base64,${readFileSync(SOURCE).toString("base64")}`;
+
+const browser = await chromium.launch({ executablePath: CHROME, args: ["--no-sandbox"] });
+
+/* Stage 1: mask the master at full resolution. */
+const masterHtml = `<!doctype html><html><head><meta charset="utf-8"><style>
+  html,body{margin:0;padding:0;overflow:hidden;background:transparent}
+</style></head><body>
+<svg width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="round">
+      <rect x="${ERODE}" y="${ERODE}" width="${SIZE - ERODE * 2}" height="${SIZE - ERODE * 2}" rx="${CORNER - ERODE}"/>
+    </clipPath>
+  </defs>
+  <image href="${sourceUri}" x="0" y="0" width="${SIZE}" height="${SIZE}" clip-path="url(#round)"/>
+</svg></body></html>`;
+const masterPage = await browser.newPage({ viewport: { width: SIZE, height: SIZE }, deviceScaleFactor: 1 });
+await masterPage.setContent(masterHtml, { waitUntil: "load" });
+const master = await masterPage.screenshot({ omitBackground: true });
+await masterPage.close();
+const masterUri = `data:image/png;base64,${master.toString("base64")}`;
+
+/* Stage 2: render each target from the masked master. */
+function pageHtml(size, mode) {
+  const img = mode === "bleed" ? sourceUri : masterUri;
   return `<!doctype html><html><head><meta charset="utf-8"><style>
-    html,body{margin:0;padding:0;background:transparent;width:${size}px;height:${size}px;overflow:hidden}
-    .icon{width:${size}px;height:${size}px;border-radius:${radius}px;
-      background:${background};
-      display:grid;place-items:center;
-      box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
-  </style></head><body><div class="icon">${SNOWFLAKE(size, stroke, inset)}</div></body></html>`;
+    html,body{margin:0;padding:0;overflow:hidden;background:transparent}
+    .icon{width:${size}px;height:${size}px;overflow:hidden}
+    .icon img{display:block;width:100%;height:100%}
+    .bleed img{transform:scale(1.2)}
+    .maskable{background:${NAVY};display:grid;place-items:center}
+    .maskable img{width:80%;height:80%}
+  </style></head><body><div class="icon ${mode}"><img src="${img}" alt=""></div></body></html>`;
 }
 
 const targets = [
-  // Standard PWA icons: rounded square, iOS-like gradient-free accent
-  { file: "icon-192.png", size: 192, radius: 42, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
-  { file: "icon-512.png", size: 512, radius: 112, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
-  // Maskable: keep the glyph inside the safe zone (80% circle)
-  { file: "maskable-512.png", size: 512, radius: 0, inset: 22, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.6 },
-  // iOS home screen icon: square, the OS applies its own mask
-  { file: "apple-touch-icon.png", size: 180, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
-  { file: "apple-touch-icon-152.png", size: 152, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
-  { file: "apple-touch-icon-167.png", size: 167, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
-  { file: "favicon-32.png", size: 32, radius: 7, inset: 13, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 4 },
+  // Standard PWA icons: the artwork's rounded square, transparent outside
+  { file: "icon-192.png", size: 192, mode: "rounded" },
+  { file: "icon-512.png", size: 512, mode: "rounded" },
+  // Maskable: full-bleed navy field, artwork inside the safe circle
+  { file: "maskable-512.png", size: 512, mode: "maskable" },
+  // iOS home screen: square, the OS applies its own mask
+  { file: "apple-touch-icon.png", size: 180, mode: "bleed" },
+  { file: "apple-touch-icon-167.png", size: 167, mode: "bleed" },
+  { file: "apple-touch-icon-152.png", size: 152, mode: "bleed" },
+  // Browser tab
+  { file: "favicon-32.png", size: 32, mode: "rounded" },
 ];
 
-const browser = await chromium.launch({ executablePath: CHROME, args: ["--no-sandbox"] });
 for (const target of targets) {
   const page = await browser.newPage({ viewport: { width: target.size, height: target.size }, deviceScaleFactor: 1 });
-  await page.setContent(pageHtml(target), { waitUntil: "load" });
+  await page.setContent(pageHtml(target.size, target.mode), { waitUntil: "load" });
   await page.screenshot({ path: `${OUT}${target.file}`, omitBackground: true });
   await page.close();
   console.log(`  ✓ ${target.file}`);
 }
 
-/* iOS splash screens are optional; a plain background keeps them tiny. */
+/* Next.js file convention: /favicon.ico is the browser-tab icon (the other
+   sizes live in public/icons and are declared in app/layout.tsx metadata).
+   The ICO is a PNG payload in an ICO container, which every browser of
+   consequence reads. */
+const favicon = readFileSync(`${OUT}favicon-32.png`);
+const header = Buffer.alloc(6);
+header.writeUInt16LE(0, 0); // reserved
+header.writeUInt16LE(1, 2); // type: icon
+header.writeUInt16LE(1, 4); // image count
+const entry = Buffer.alloc(16);
+entry.writeUInt8(32, 0); // width
+entry.writeUInt8(32, 1); // height
+entry.writeUInt16LE(1, 4); // colour planes
+entry.writeUInt16LE(32, 6); // bits per pixel
+entry.writeUInt32LE(favicon.length, 8);
+entry.writeUInt32LE(22, 12); // payload offset
+writeFileSync(`${ROOT}app/favicon.ico`, Buffer.concat([header, entry, favicon]));
+console.log("  ✓ app/favicon.ico");
+
+/* iOS splash screens: a light stage with the new mark and the wordmark. */
+const badgeUri = `data:image/png;base64,${readFileSync(`${OUT}icon-192.png`).toString("base64")}`;
 const splash = `<!doctype html><html><head><meta charset="utf-8"><style>
   html,body{margin:0;height:100%;background:linear-gradient(180deg,#fbfcfd,#f1f5f9);
   display:grid;place-items:center;font-family:-apple-system,system-ui,sans-serif}
   .mark{display:grid;gap:14px;justify-items:center}
-  .badge{width:96px;height:96px;border-radius:24px;background:linear-gradient(180deg,#5c88a8,#476e8c);display:grid;place-items:center}
+  .badge{width:96px;height:96px;border-radius:24px;box-shadow:0 10px 24px -12px rgb(16 21 40 / .5)}
   .name{font-size:22px;font-weight:600;color:#26323b;letter-spacing:-.01em}
-</style></head><body><div class="mark"><div class="badge">${SNOWFLAKE(96, 3.4, 18)}</div><div class="name">Freezmo</div></div></body></html>`;
+</style></head><body><div class="mark"><img class="badge" src="${badgeUri}" alt=""><div class="name">Freezmo</div></div></body></html>`;
 
 const splashTargets = [
   [1170, 2532], [1284, 2778], [1179, 2556], [1290, 2796], [750, 1334], [828, 1792], [1536, 2048], [1668, 2388],