DataIntegrationGroup · jirhiker · Aug 5, 2026
diff --git a/FRONTEND.md b/FRONTEND.md
@@ -475,6 +475,30 @@ The matching CSS variables are `--bloom` and `--sand` (utilities `bg-bloom`,
 once in `:root` with no `.dark` override, because a logo does not change colour
 with the theme.
 
+### The favicon
+
+The favicon is the one place the whole palette appears at once, and it is built
+from palette values only:
+
+| Part | Token | Hex |
+| --- | --- | --- |
+| Field | `brand[950]` | `#0d273c` |
+| Stems | `sand[100]` | `#f2e9d2` |
+| Blooms | `bloom[500]` | `#e2552e` |
+
+`public/favicon.svg` is the source of truth. The rasters are generated from it,
+so **edit the SVG and regenerate** rather than touching the PNGs:
+
+```bash
+cd public
+rsvg-convert -w 180 -h 180 -b '#0d273c' favicon.svg -o apple-touch-icon.png
+rsvg-convert -w 48 -h 48 favicon.svg -o favicon.png
+```
+
+`favicon.ico` bundles 16/32/48 in one container. There is no ImageMagick in this
+project, so it is assembled by hand — see the commit that introduced it for the
+script.
+
 ### Contrast
 
 The brand ramp is chosen so every primary-on-surface pairing clears WCAG AA

diff --git a/index.html b/index.html
@@ -2,7 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.png" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg