feat: a favicon, the s of the wordmark over one of its bundles on a tile, with a bitmap for a home screen

CLAUDE.md

@@ -14,6 +14,7 @@ The page moves on its own cadence, apart from `sqzer`: the look, the controls, q
 
 ```
 index.html                  the entry Vite builds. The Content-Security-Policy is added at build
+public/                     the icon, copied to the root of the build as it is
 vite.config.ts              the build, and the one place the policy is written
 components.json             what `shadcn add` reads: the Base UI base, the Mira style, where components go
 src/app/                    the root and `style.css`: the tokens, the fonts, the `glass` utility

index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="color-scheme" content="light dark" />
     <title>sqzer</title>
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta
       name="description"
       content="Drop an image, get a smaller one that looks the same. Runs in the browser, nothing is uploaded."

tests/e2e/page.spec.ts

@@ -202,3 +202,20 @@ test("the policy names no origin but the page's own", async ({ page }) => {
   expect(policy).not.toMatch(/https?:|\*|unsafe-inline|data:/u);
   expect([...origins]).toEqual([new URL(page.url()).origin]);
 });
+
+test("the icon is the page's own, an SVG that the policy lets through, with a bitmap for a home screen", async ({
+  page,
+}) => {
+  await open(page);
+  const icon = await page.locator('link[rel=icon]').getAttribute('href');
+  const touch = await page.locator('link[rel=apple-touch-icon]').getAttribute('href');
+
+  expect(icon).toBe('/icon.svg');
+  const svg = await page.request.get(icon ?? '');
+  expect(svg.ok()).toBe(true);
+  expect(svg.headers()['content-type']).toContain('image/svg+xml');
+  expect(await svg.text()).toContain('prefers-color-scheme: dark');
+  const png = await page.request.get(touch ?? '');
+  expect(png.ok()).toBe(true);
+  expect(png.headers()['content-type']).toContain('image/png');
+});