Redraw the app icon so it survives a home screen

The icon was a flat hot-pink heart filling an ink square. One colour,
no depth, and at tab size it read as a smudge.

It now gets the treatment the rest of the app already gives that glyph:
a lavender ground, the ink halo PixelHeart draws for map pins, a hard
`deep` offset shadow with no blur, and an aqua and a white sparkle.
Every colour is a palette token; nothing is anti-aliased.

Three variants rather than one, because phones do not show a square:

- The favicon keeps a hard ink frame. The browser tab is the only place
  the icon stays square, so it is the only place a frame survives.
- The installed icon is full bleed with the sparkles out at the corners,
  clear of the heart's halo. An iOS squircle keeps both.
- The maskable icon drops the sparkles entirely. Android crops it to a
  circle, and a circle sized to this heart leaves no corner that both
  clears the glyph and stays in the safe zone — better none than two
  sliced in half.

make-icons.mjs now emits favicon.svg too, so all five files come from
one grid instead of the SVG being maintained by hand. Every output size
is a whole multiple of the 16px grid, which is why apple-touch-icon is
192 rather than the conventional 180 — 180 would round some cells to 11
device pixels and others to 12. Run it with --preview to see the
installed icon behind an iOS-style squircle before shipping.

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

Author: Kjubikstronk

.gitignore

@@ -32,3 +32,4 @@ dev-dist
 
 # Filled-in rules with real UIDs — the committed firestore.rules is a template
 firestore.rules.local
+icon-preview.png

public/apple-touch-icon.png

@@ -1,11 +1,17 @@
 /**
- * Generates the PWA / home-screen icons from the same pixel heart the app uses.
+ * Generates the favicon and the PWA / home-screen icons from the same pixel
+ * heart the app uses.
  *
  * Written by hand rather than pulled from a library because the image is a
- * literal pixel grid — nearest-neighbour scaling of a 9x8 bitmap is a few lines
- * of arithmetic, and adding a raster dependency to draw eight squares would be
+ * literal pixel grid — nearest-neighbour scaling of a bitmap is a few lines of
+ * arithmetic, and adding a raster dependency to draw a few squares would be
  * silly. iOS needs PNG for apple-touch-icon, so SVG alone wouldn't do.
  *
+ * The heart was a flat pink silhouette on ink, which read as a smudge at tab
+ * size. It now gets the same treatment the rest of the app gives it: a hard
+ * offset shadow with no blur, the ink halo PixelHeart already draws for map
+ * pins, and two sparkles. Every colour is a palette token.
+ *
  *   node scripts/make-icons.mjs
  */
 import { deflateSync } from 'node:zlib'
@@ -24,8 +30,91 @@ const HEART = [
   '....X....',
 ]
 
-const INK = [0x1a, 0x10, 0x33]
-const HOT = [0xff, 0x5c, 0xa8]
+const INK = '#1A1033'
+const CARD = '#FFFDFE'
+const HOT = '#FF5CA8'
+const DEEP = '#B31E67'
+const LAV = '#B8A6FF'
+const AQUA = '#5BE0E6'
+
+/** Everything is composed on this grid, then scaled up by whole pixels. */
+const N = 16
+/** Top-left of the 9x8 heart within the grid. */
+const HX = 3
+const HY = 4
+
+const lit = []
+HEART.forEach((row, y) => [...row].forEach((c, x) => c === 'X' && lit.push([x, y])))
+const isLit = new Set(lit.map(([x, y]) => `${x},${y}`))
+
+/**
+ * @param border  edge colour, or null for the maskable icon — Android crops
+ *                that one to a circle, so a frame would be sliced off.
+ * @param sparkles [x, y, colour] centres of five-pixel plus shapes.
+ */
+function compose({ border, sparkles }) {
+  const g = Array.from({ length: N }, () => Array(N).fill(LAV))
+
+  if (border) {
+    for (let i = 0; i < N; i++) {
+      g[0][i] = border
+      g[N - 1][i] = border
+      g[i][0] = border
+      g[i][N - 1] = border
+    }
+  }
+
+  // Shadow first, one pixel down and right. Hard edge, no blur — the same
+  // offset the cards and buttons use.
+  for (const [x, y] of lit) set(g, x + HX + 1, y + HY + 1, DEEP)
+
+  // The ink halo, only over untouched background so it never eats the shadow.
+  for (const [x, y] of lit) {
+    for (let dy = -1; dy <= 1; dy++) {
+      for (let dx = -1; dx <= 1; dx++) {
+        if (isLit.has(`${x + dx},${y + dy}`)) continue
+        const px = x + dx + HX
+        const py = y + dy + HY
+        if (g[py]?.[px] === LAV) g[py][px] = INK
+      }
+    }
+  }
+
+  for (const [x, y] of lit) set(g, x + HX, y + HY, HOT)
+
+  for (const [cx, cy, colour] of sparkles) {
+    for (const [dx, dy] of [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1]]) {
+      set(g, cx + dx, cy + dy, colour)
+    }
+  }
+  return g
+}
+
+function set(g, x, y, colour) {
+  if (g[y]?.[x] !== undefined) g[y][x] = colour
+}
+
+/**
+ * The browser tab is the one place the icon stays a square, so that is the one
+ * place it gets a frame. Every phone rounds or masks its icons, and a hard
+ * square border under a rounded mask loses its corners and reads as broken.
+ */
+const FAVICON = compose({ border: INK, sparkles: [[12, 2, AQUA], [3, 12, CARD]] })
+
+/**
+ * The installed icon: full bleed, no frame. The sparkles sit in the corners,
+ * clear of the heart and its halo — pulled any further in and they land on
+ * the glyph itself. An iOS squircle keeps enough corner for both.
+ */
+const APP = compose({ border: null, sparkles: [[12, 2, AQUA], [3, 12, CARD]] })
+
+/**
+ * Android crops this one to a circle, and a circle that fits a heart this size
+ * has no corner left to put a sparkle in — every position that clears the
+ * glyph falls outside the safe zone. So it goes without, rather than shipping
+ * an icon with two sparkles sliced in half.
+ */
+const MASKABLE = compose({ border: null, sparkles: [] })
 
 // ── PNG encoding ────────────────────────────────────────────────────────────
 
@@ -50,73 +139,111 @@ function chunk(type, data) {
   return Buffer.concat([len, body, crc])
 }
 
-function png(width, height, rgb) {
-  const ihdr = Buffer.alloc(13)
-  ihdr.writeUInt32BE(width, 0)
-  ihdr.writeUInt32BE(height, 4)
-  ihdr[8] = 8 // bit depth
-  ihdr[9] = 2 // colour type: truecolour RGB
-  return Buffer.concat([
-    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
-    chunk('IHDR', ihdr),
-    chunk('IDAT', deflateSync(rgb, { level: 9 })),
-    chunk('IEND', Buffer.alloc(0)),
-  ])
-}
+const rgb = (hex) => [
+  parseInt(hex.slice(1, 3), 16),
+  parseInt(hex.slice(3, 5), 16),
+  parseInt(hex.slice(5, 7), 16),
+]
 
-// ── Drawing ─────────────────────────────────────────────────────────────────
+/** Every size is a whole multiple of the grid, so no cell comes out uneven. */
+function png(grid, size) {
+  const cell = size / N
+  if (!Number.isInteger(cell)) throw new Error(`${size} is not a multiple of ${N}`)
 
-/**
- * @param size    output edge length in px
- * @param inset   fraction of the canvas left as background around the heart.
- *                Maskable icons get cropped to a circle on Android, so the
- *                glyph has to sit inside the safe zone.
- */
-function render(size, inset) {
-  const gw = HEART[0].length
-  const gh = HEART.length
-  const cell = Math.floor((size * (1 - inset * 2)) / gw)
-  const drawW = cell * gw
-  const drawH = cell * gh
-  const offX = Math.floor((size - drawW) / 2)
-  const offY = Math.floor((size - drawH) / 2)
-
-  // One filter byte (0 = None) per scanline, then RGB triples.
   const stride = size * 3 + 1
   const raw = Buffer.alloc(stride * size)
-
   for (let y = 0; y < size; y++) {
     const rowStart = y * stride
-    raw[rowStart] = 0
+    raw[rowStart] = 0 // filter: None
     for (let x = 0; x < size; x++) {
-      const gx = Math.floor((x - offX) / cell)
-      const gy = Math.floor((y - offY) / cell)
-      const lit =
-        gx >= 0 && gx < gw && gy >= 0 && gy < gh && HEART[gy][gx] === 'X'
-      const [r, g, b] = lit ? HOT : INK
+      const [r, g, b] = rgb(grid[(y / cell) | 0][(x / cell) | 0])
       const p = rowStart + 1 + x * 3
       raw[p] = r
       raw[p + 1] = g
       raw[p + 2] = b
     }
   }
 
-  return png(size, size, raw)
+  const ihdr = Buffer.alloc(13)
+  ihdr.writeUInt32BE(size, 0)
+  ihdr.writeUInt32BE(size, 4)
+  ihdr[8] = 8 // bit depth
+  ihdr[9] = 2 // colour type: truecolour RGB
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk('IHDR', ihdr),
+    chunk('IDAT', deflateSync(raw, { level: 9 })),
+    chunk('IEND', Buffer.alloc(0)),
+  ])
+}
+
+/** Runs of one colour merge into a single rect, which keeps the file small. */
+function svg(grid) {
+  let rects = ''
+  grid.forEach((row, y) => {
+    let x = 0
+    while (x < N) {
+      let w = 1
+      while (x + w < N && row[x + w] === row[x]) w++
+      rects += `<rect x="${x}" y="${y}" width="${w}" height="1" fill="${row[x]}"/>`
+      x += w
+    }
+  })
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${N} ${N}" shape-rendering="crispEdges">${rects}</svg>\n`
 }
 
 const outDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'public')
 mkdirSync(outDir, { recursive: true })
 
 const targets = [
-  ['icon-192.png', 192, 0.16],
-  ['icon-512.png', 512, 0.16],
-  // Android maskable icons are cropped hard; give the heart more room.
-  ['icon-maskable-512.png', 512, 0.26],
-  // iOS does not round-crop, so it can be tighter.
-  ['apple-touch-icon.png', 180, 0.14],
+  ['icon-192.png', APP, 192],
+  ['icon-512.png', APP, 512],
+  ['icon-maskable-512.png', MASKABLE, 512],
+  // 192 rather than the conventional 180: 180 is not a whole multiple of the
+  // 16px grid, and iOS scales this happily either way.
+  ['apple-touch-icon.png', APP, 192],
 ]
 
-for (const [name, size, inset] of targets) {
-  writeFileSync(join(outDir, name), render(size, inset))
+for (const [name, grid, size] of targets) {
+  writeFileSync(join(outDir, name), png(grid, size))
   console.log(`wrote public/${name}  (${size}x${size})`)
 }
+writeFileSync(join(outDir, 'favicon.svg'), svg(FAVICON))
+console.log('wrote public/favicon.svg')
+
+// Not shipped — a look at the installed icon behind an iOS-style squircle, so
+// the corner treatment can be judged before it reaches a home screen.
+if (process.argv.includes('--preview')) {
+  const size = 512
+  const grid = APP
+  const cell = size / N
+  const stride = size * 3 + 1
+  const raw = Buffer.alloc(stride * size)
+  const r0 = size / 2
+  for (let y = 0; y < size; y++) {
+    raw[y * stride] = 0
+    for (let x = 0; x < size; x++) {
+      // Superellipse, the shape iOS actually uses.
+      const dx = Math.abs(x - r0 + 0.5) / r0
+      const dy = Math.abs(y - r0 + 0.5) / r0
+      const inside = Math.pow(dx, 5) + Math.pow(dy, 5) <= 1
+      const [r, g, b] = inside ? rgb(grid[(y / cell) | 0][(x / cell) | 0]) : [0x22, 0x22, 0x22]
+      const p = y * stride + 1 + x * 3
+      raw[p] = r
+      raw[p + 1] = g
+      raw[p + 2] = b
+    }
+  }
+  const ihdr = Buffer.alloc(13)
+  ihdr.writeUInt32BE(size, 0)
+  ihdr.writeUInt32BE(size, 4)
+  ihdr[8] = 8
+  ihdr[9] = 2
+  writeFileSync(join(outDir, '..', 'icon-preview.png'), Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk('IHDR', ihdr),
+    chunk('IDAT', deflateSync(raw, { level: 9 })),
+    chunk('IEND', Buffer.alloc(0)),
+  ]))
+  console.log('wrote icon-preview.png (squircle preview, not shipped)')
+}