From 0538d61ba6c65f961f95a7affe0e64832f8c0532 Mon Sep 17 00:00:00 2001
From: Esa Kataja <ekataja@gmail.com>
Date: Sat, 5 Sep 2026 18:58:42 +0300
Subject: [PATCH] Add a favicon, home-screen icons and a web manifest
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The favicon is a bowl of soup: this household's catalog is half keitto, so it
is at least honest. favicon.svg follows the system theme in the tab strip.

Home-screen icons cannot do the same. They must be opaque and must not change
with the theme, so assets/icon.svg is a separate fixed-colour source, with the
artwork inside the central 80% for Android to mask to any launcher shape. The
same 512 is declared maskable in the manifest.

`make icons` rasterises with rsvg-convert and compresses with
`oxipng -o max --zopfli`, which beat `optipng -o7` at every size — 5860 bytes
against 6109 for the three files. Plain `oxipng -o max` was not an upgrade: it
won the two small icons and lost the 512, ending up larger overall. All output
verified pixel-identical to the rasterizer. The PNGs are committed so the
build needs no rasterizer.

Two things that only fail on a real device, so both are covered by smoke
checks: Go has no mime entry for .webmanifest and served it as octet-stream,
which browsers ignore; and a manifest fetch carries no credentials by default,
so behind Basic auth it needs crossorigin="use-credentials" or it 401s.
---
 Makefile                                 |  17 +++-
 README.md                                |  21 +++-
 assets/icon.svg                          |  19 ++++
 cmd/foodster/main.go                     |   5 +
 cmd/foodster/static/apple-touch-icon.png | Bin 0 -> 1356 bytes
 cmd/foodster/static/favicon.svg          |  16 +++
 cmd/foodster/static/icon-192.png         | Bin 0 -> 1385 bytes
 cmd/foodster/static/icon-512.png         | Bin 0 -> 3119 bytes
 cmd/foodster/static/manifest.webmanifest |  17 ++++
 cmd/foodster/views.templ                 |   7 ++
 mockups/favicon/a-kulho.svg              |  16 +++
 mockups/favicon/b-kattila.svg            |  14 +++
 mockups/favicon/c-lusikka.svg            |  12 +++
 mockups/favicon/d-ruisleipa.svg          |  14 +++
 mockups/favicon/index.html               | 118 +++++++++++++++++++++++
 scripts/smoke.sh                         |  11 +++
 16 files changed, 283 insertions(+), 4 deletions(-)
 create mode 100644 assets/icon.svg
 create mode 100644 cmd/foodster/static/apple-touch-icon.png
 create mode 100644 cmd/foodster/static/favicon.svg
 create mode 100644 cmd/foodster/static/icon-192.png
 create mode 100644 cmd/foodster/static/icon-512.png
 create mode 100644 cmd/foodster/static/manifest.webmanifest
 create mode 100644 mockups/favicon/a-kulho.svg
 create mode 100644 mockups/favicon/b-kattila.svg
 create mode 100644 mockups/favicon/c-lusikka.svg
 create mode 100644 mockups/favicon/d-ruisleipa.svg
 create mode 100644 mockups/favicon/index.html

diff --git a/Makefile b/Makefile
index 083c7f1..2ad5146 100644
--- a/Makefile
+++ b/Makefile
@@ -3,6 +3,7 @@
 COMPOSE ?= podman compose
 BIN     := foodster
 PKG     := ./cmd/foodster
+STATIC  := cmd/foodster/static
 
 # Vendored Datastar client. Bump, run `make vendor`, commit the result.
 DATASTAR_VERSION ?= v1.0.3
@@ -18,7 +19,7 @@ endif
 GOFILES = $(shell find . -name '*.go' -not -name '*_templ.go' 2>/dev/null)
 
 .DEFAULT_GOAL := help
-.PHONY: help generate build run seed test smoke check lint fix vendor image push release up down logs clean
+.PHONY: help generate build run seed test smoke check lint fix icons vendor image push release up down logs clean
 
 help: ## Show this help
 	@grep -hE '^[a-zA-Z_-]+:.*## ' $(MAKEFILE_LIST) \
@@ -51,10 +52,20 @@ check: ## Everything that must pass before a commit
 	@$(MAKE) --no-print-directory smoke
 	@echo "check: all passed"
 
+icons: ## Rasterise home-screen PNGs from assets/icon.svg and optimise them
+	rsvg-convert -w 180 -h 180 assets/icon.svg -o $(STATIC)/apple-touch-icon.png
+	rsvg-convert -w 192 -h 192 assets/icon.svg -o $(STATIC)/icon-192.png
+	rsvg-convert -w 512 -h 512 assets/icon.svg -o $(STATIC)/icon-512.png
+	# oxipng -o max alone loses to optipng on the 512; --zopfli wins at every
+	# size. Slow, but these are three tiny files built by hand.
+	oxipng -o max --zopfli --quiet \
+		$(STATIC)/apple-touch-icon.png $(STATIC)/icon-192.png $(STATIC)/icon-512.png
+	@ls -l $(STATIC)/*.png
+
 vendor: ## Re-download the Datastar client (DATASTAR_VERSION=v1.0.3)
-	curl -sSfL -o cmd/foodster/static/datastar.js \
+	curl -sSfL -o $(STATIC)/datastar.js \
 		"https://cdn.jsdelivr.net/gh/starfederation/datastar@$(DATASTAR_VERSION)/bundles/datastar.js"
-	@head -1 cmd/foodster/static/datastar.js
+	@head -1 $(STATIC)/datastar.js
 
 lint: generate ## go vet, gofmt check, golangci-lint when installed
 	go vet ./...
diff --git a/README.md b/README.md
index ae8354d..3067b0b 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,12 @@ Working:
 
 Still to build:
 
+- **UI polish.** Checkbox chips hide the native control and signal state only
+  through background colour, so "Tarjoillaan lisukkeiden kanssa" gives no
+  clear read of on versus off. Show a real checkbox. Same applies to the
+  category and side chips.
 - Light / dark theme switch, saved per device (PRD §7.4).
-- A proper app header and a `favicon.svg`.
+- A proper app header.
 - Stage 2: the seven-meal suggester, which starts once there is history to
   weight against.
 
@@ -102,6 +106,21 @@ a scratch database:
 make seed                      # or: SEED=seeds/other.json make seed
 ```
 
+## Icons
+
+`cmd/foodster/static/favicon.svg` is the browser-tab icon and follows the
+system theme. The home-screen icons are PNGs, because a home-screen icon
+cannot be transparent and must not change with the theme; they are rasterised
+from `assets/icon.svg`, which is opaque and keeps the artwork inside the
+central 80% so Android can mask it to any shape.
+
+```sh
+make icons      # rsvg-convert, then optipng -o7
+```
+
+The PNGs are committed so the build needs no rasterizer. Re-run `make icons`
+after editing `assets/icon.svg`.
+
 ## Migrations
 
 Numbered SQL files in `cmd/foodster/migrations`, embedded in the binary and
diff --git a/assets/icon.svg b/assets/icon.svg
new file mode 100644
index 0000000..5560ce2
--- /dev/null
+++ b/assets/icon.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"
+     role="img" aria-label="Foodster">
+  <!-- Source for the home-screen PNGs; `make icons` rasterises it.
+       Unlike favicon.svg this one is opaque and fixed-colour: a home screen
+       icon cannot be transparent and must not change with the system theme.
+       The bowl sits inside the central 80% so Android can mask it to any
+       shape without clipping the artwork. -->
+  <rect width="512" height="512" fill="#15616D"/>
+  <g transform="translate(112 112) scale(9)">
+    <g fill="#ECEDE8">
+      <rect x="1.5" y="12" width="29" height="3.2" rx="1.6"/>
+      <path d="M3.5 15.2 h25 a12.5 12.5 0 0 1 -25 0 z"/>
+    </g>
+    <g fill="none" stroke="#ECEDE8" stroke-width="3" stroke-linecap="round">
+      <path d="M11.5 9 c0 -2.1 2.1 -2.6 2.1 -4.6"/>
+      <path d="M19 9 c0 -2.1 2.1 -2.6 2.1 -4.6"/>
+    </g>
+  </g>
+</svg>
diff --git a/cmd/foodster/main.go b/cmd/foodster/main.go
index 934f14e..e38b864 100644
--- a/cmd/foodster/main.go
+++ b/cmd/foodster/main.go
@@ -15,6 +15,7 @@ import (
 	"flag"
 	"fmt"
 	"log"
+	"mime"
 	"net/http"
 	"os"
 	"os/signal"
@@ -140,6 +141,10 @@ func openDB(path string) (*sql.DB, error) {
 }
 
 func routes(db *sql.DB, loc *time.Location, password string) http.Handler {
+	// Go's mime table has no entry for .webmanifest, and a manifest served as
+	// octet-stream is ignored by the browser.
+	_ = mime.AddExtensionType(".webmanifest", "application/manifest+json")
+
 	a := &app{db: db, loc: loc}
 
 	mux := http.NewServeMux()
diff --git a/cmd/foodster/static/apple-touch-icon.png b/cmd/foodster/static/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e893c0cd65603c794f645f114d3c5eca6625db5
GIT binary patch
literal 1356
zcmV-S1+)5zP)<h;3K|Lk000e1NJLTq006WA006WI0{{R33KRAK00069P)t-s6=7|p
zzQ644=(ftq>+I*=<lv&czT4s6qrShw($F7gbHvlpZJVIc+u0&%b-T^XMSzLw?B{Qr
zpt8rtxy;KYY<3)GaXoy5IeCJNud!5$kr-od8f9?X;@{`$<w=8zCT(|7h>+>)<}!7D
zk+QUWq^QT$)7RkKbe^M9iICRc+fIg#%h=YQy1OQ9c29?ohpVnQcYuAQsM6foL4AhR
z-rHxEoUq2ldZVYR!@{b<!l}W*FLHaOzrc2&rCpGgc%r7Ay1JaXyG@0Sn76o>wz!qF
zw&dvJ=IQ20gNjChiL=PZ&DqvslbK3{i)EFX9cFSjcYwpv&>LlMvB$=rySzGif;@YK
zM}msM(a_J?*T2xugsQEZxw?(8vO<1_t;ED0XL44Il5m`%&f3;@p`|TwdT5uN#M04I
ziICIX+B0;2EO2_f&diFfur_vowaUq4l$(2_r`X`!sKLQ@p`}=jlqqg`ex<2nl$w>a
zwPux@J9>k<%*)K!)#d2qYMGvtv$eFz$ZMIN7h-O%#l?W9s^RA1nz*=ur>k|Jq)38_
z=<DVnXmh^L&R>$3ld`oyeT83<mnCa;;N{`m<KQD|bun{&rog`;X>`!r*le1gBx`kp
zsjQE&vw5SY8)b3H*VQz2f6CX@)ZW`Qc7WpN;%b<kp}f6wo}(6GZW&{58f0+9xDBWP
z00RI?L_t(|+U&sr0RR95129=>L}5X`t;hxd00000003}1{Sw0>u52bG0ASCa`YczX
zD1fhCZQHi{+BSdJwrz~twr%6&+s)fpNlw~0Rh1h2U$>w42J{rSLb9wBTg*KlOR{Ga
zI$Gs*FUMfBAYL~y0{zSl^M+__@+wU&(9at*1x&%|Gnzhy2!u$NVY+l4PJYe=-PF@E
z1&56qnm&ehmTPGW+<?Q6w2VPFNujjF!{MGGTAqe(o}ukcc#T)klJ__?vrb#!Td-}6
z(e?;5lbl7{A3NW|yP%h*-)XzA8@9(+Xj_A38fgo-3tmsq7Mugk{6yO{ypDI#l9vn3
zd`Vk#6TAv(dlI_&f|l<_;7~-%8njbQQ$Qyi!eVJE9)Wg>Y4V3t3N3}u&r3Aj4X2N2
zc@Fvsrl|x@AJUQn{e;kz3@49u%)jZ-&zV|Y7lO?qctag@^z$%DJ{pEC+Pg@0oq(RE
zCTFIzvE9PM1+%|GoICEg!|3hv6RvN-fJDpllwy7X(nLj4l8JH1axbO%2eL#{nrg`M
zI;E+BEU!_Tc*xR7X;vYN5lu-FJdh?TgfavKMM0)N>t@^hg=(8!U50cm6sjF6{7<1e
zpu!}DT7?P&6zVCc&`+U~mHZJe5CZWmlqjP>zd((LC{Q!hD5OBMP$Px{-48W9Llh=3
z9g2)mm>{TfjKZWr6(f^^1RGGMfP&0Go%}osk+%Saf+)oMP$?yr0t9>jrTi$s8r1q>
zg+6Qj4T^nFpLIYrBb+{Z#{=aSTIrLOx8Z_b`s5^B@dADDBHWSw7?12L4_uOzz$5DU
z8m>tU<&lIA!bM^4@d*AJhpXNV;-URF2bXQEXYo+FTAJX#><4%VOP$a{Rb>DVDB#&d
z=;D<k9!NzwG-5<Va$ggZ9_Yn5y~sT+{_TN=`e!n^i@?hA4QMJOEj2uVTf~N^re#2H
zIi)418WxuV$-t$>hWho~DqLv~js*Y!000L0TMuJT1poj5000000KhD%FP9=!^|U(x
O0000<MNUMnLSTXb38%{d

literal 0
HcmV?d00001

diff --git a/cmd/foodster/static/favicon.svg b/cmd/foodster/static/favicon.svg
new file mode 100644
index 0000000..a5e5918
--- /dev/null
+++ b/cmd/foodster/static/favicon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Foodster">
+  <!-- Kulho: a bowl with steam. Finnish dinner is soup more often than not,
+       and this household's own catalog is half keitto. -->
+  <style>
+    svg { color: #15616D; }
+    @media (prefers-color-scheme: dark) { svg { color: #58C6D2; } }
+  </style>
+  <g fill="currentColor">
+    <rect x="1.5" y="12" width="29" height="3.2" rx="1.6"/>
+    <path d="M3.5 15.2 h25 a12.5 12.5 0 0 1 -25 0 z"/>
+  </g>
+  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+    <path d="M11.5 9 c0 -2.1 2.1 -2.6 2.1 -4.6"/>
+    <path d="M19 9 c0 -2.1 2.1 -2.6 2.1 -4.6"/>
+  </g>
+</svg>
diff --git a/cmd/foodster/static/icon-192.png b/cmd/foodster/static/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..124ee5bc80400ee0b70e8d5fed8934ebbd7e417c
GIT binary patch
literal 1385
zcmV-v1(y1WP)<h;3K|Lk000e1NJLTq006)M006)U0{{R3WdfWv0005|P)t-s6=7|8
zqo(Zb=)BI&>g?xal$)NqyXouZ)!y5ixw_}+<#3##C2V%)>E@=uzjB?T9cFTXr>flI
z-z95x8)a{2mYmw*-O1P0(A(Iey}mDUe5}L6KYWEKZFuJC<lyDu+u`1yy1T^F(YedY
zEpU25euf-oah<xl&)L^chmX+O*eq~*be^L;dxTbul5Lxx(%jl<mz~1W&>v@WIe399
zZ+eWcu_tYK)7{z{WN>PjoyynMFLHax)zfyMq{GtCzR%7>e}}ls%HihXwaUq|$Hs%H
ztaqWMTaK2ez`#w0jikQ6;^*Q}hmSROfaK`ooVmL)b$&Z~gG+>r+v49bbbW!St1xqX
zW0aa}nVz@G$~=05uEfP$kCor$;K$X|<>=(x<KT#^uUL(gCTw<Pm6}e5jzN8f&f3<I
zvb02ih*F7=f2FFw(9gEY$+O7EvB$=TtFEBCyqC4NSBsM*YjtXwp3>ae*5BK`&dr#&
zxTU|q<LBdHlbNu_#b%Y8B58GBl9%1%;FYwss=~tO>g8{npfhxTld`qw>*kNKvpRW#
z#M03qXmixw+ZttXlC!lNWpO!qf`X~5slmZoj+Gf>Z{FnK%-Gd2bA2{;e`1rFY?_}(
zf{Is+lO}C<MuCaz?B_^=iWg#TNrQ@tt+0ivtr%l(7GiG60~&h(00SvWL_t(|+U&uB
z00000fS~=U7pVdO000000001h*@FlE$dWh;pm%R<+Z;2qwl!<pHpVt$8}0s<i~c>v
zNmteTFU|?n@W@O8t4Y4{Y7fNg|K==N{d5E?96CtmXWtFkdJZ$?*CgN<V@hokM7xWY
zbMTAO@;oG)n55-L__fiJQwYJPX)A|cJ8fYI7NxBkKFM<0mLS+o+G^mli;fw{_0=uf
zis99LKW)wTLaf4CIv#@84mvs@R^mxIikje2LRS^UiqTaEkEJ3yCQBjJt`HredAKf~
zq$>ugx_8p`8$7Pib)p|qJw?~RMYy^$=?HxZsVb}KxE6)S%XGyd)(3Q5hsVX2=s2H%
zSnt!32e0FF?5==V$q#9p>V{V~Z8=?#tDcSp_&iKo9t3No?Q8-*2Wk5bf-TYZHT<e+
z>xE!<hG;ntzei}f)(^?vrR4(r_R?|{qP=&NDNjtmZ}<nMT)qL>x@t&f?&!gC$Ig&s
zUoWIfgx`7lEv)9o7stPi;D7)7p8)mu-J!{$2cX~Zl^kl5Gc*XzA`R5)Y7%;#qh^<&
z*H6^!XXtg3n&m>T6V$90dYz$Wb<itHy+UDV7N=ID(5@<%+6-jDfXKf62QoA`uzz0!
zhD=j~dYJP$HK>3&gVdlB1~pT;k6}^`mHP-LjZwK`nDi-?i^HS~R4xl9%}}`;Fe;ad
z-2=1Qs8}A%s-j|9FsmY;N);8turVrC4AaJ`)B;Q!ET=-Pl`yW13VjdrDjugYEyoam
z7?p`52u&?iWO5OK*h@vOBN&N3Dsec0fGlNFfy_q{m|v*CD1tN5!L&V=K!7@5XPR2~
zAW*O6GcC<g1nl=5rXlAU1a6LLD1ZPZncSw#0*El4&uuBX1R-8H%57+Q4r096&MkZJ
z2m~3v%`M6<g)HN_+=7A6AWmsn5jW}9?S4qqI~L+5WIlTYQjKKa;s!Ds8X?&mZ|>$g
zc9u;;x@7p~6jwDhG@ryjLuc0MQ<v%S$*I#>d+-nQXM1o^000C80L=Ao03fLlp0{n?
r*?L58bF7jc0000000000004g;?gO1y=?P|200000NkvXXu0mjfEn>cx

literal 0
HcmV?d00001

diff --git a/cmd/foodster/static/icon-512.png b/cmd/foodster/static/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..1652c5a0d955d3fa635e0c7fd3126a7e929af825
GIT binary patch
literal 3119
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
Ul1vZ9*?%sUrcje6Bag)Y0!4Y?Pyhe`

literal 0
HcmV?d00001

diff --git a/cmd/foodster/static/manifest.webmanifest b/cmd/foodster/static/manifest.webmanifest
new file mode 100644
index 0000000..fb3d71b
--- /dev/null
+++ b/cmd/foodster/static/manifest.webmanifest
@@ -0,0 +1,17 @@
+{
+  "id": "/",
+  "name": "Foodster",
+  "short_name": "Foodster",
+  "lang": "fi",
+  "dir": "ltr",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#ECEDE8",
+  "theme_color": "#15616D",
+  "icons": [
+    { "src": "/static/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}
diff --git a/cmd/foodster/views.templ b/cmd/foodster/views.templ
index 86e9fc2..454997f 100644
--- a/cmd/foodster/views.templ
+++ b/cmd/foodster/views.templ
@@ -76,7 +76,14 @@ templ page(title, current string) {
 			<meta charset="utf-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
 			<meta name="color-scheme" content="light dark"/>
+			<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ECEDE8"/>
+			<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#121316"/>
 			<title>{ title }</title>
+			<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/>
+			<link rel="apple-touch-icon" href="/static/apple-touch-icon.png"/>
+			<!-- use-credentials: the manifest is fetched behind Basic auth and
+			     would otherwise come back 401 and be ignored. -->
+			<link rel="manifest" href="/static/manifest.webmanifest" crossorigin="use-credentials"/>
 			<link rel="stylesheet" href="/static/app.css"/>
 			<script type="module" src="/static/datastar.js"></script>
 		</head>
diff --git a/mockups/favicon/a-kulho.svg b/mockups/favicon/a-kulho.svg
new file mode 100644
index 0000000..a5e5918
--- /dev/null
+++ b/mockups/favicon/a-kulho.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Foodster">
+  <!-- Kulho: a bowl with steam. Finnish dinner is soup more often than not,
+       and this household's own catalog is half keitto. -->
+  <style>
+    svg { color: #15616D; }
+    @media (prefers-color-scheme: dark) { svg { color: #58C6D2; } }
+  </style>
+  <g fill="currentColor">
+    <rect x="1.5" y="12" width="29" height="3.2" rx="1.6"/>
+    <path d="M3.5 15.2 h25 a12.5 12.5 0 0 1 -25 0 z"/>
+  </g>
+  <g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round">
+    <path d="M11.5 9 c0 -2.1 2.1 -2.6 2.1 -4.6"/>
+    <path d="M19 9 c0 -2.1 2.1 -2.6 2.1 -4.6"/>
+  </g>
+</svg>
diff --git a/mockups/favicon/b-kattila.svg b/mockups/favicon/b-kattila.svg
new file mode 100644
index 0000000..83b2a4a
--- /dev/null
+++ b/mockups/favicon/b-kattila.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Foodster">
+  <!-- Kattila: a cooking pot, lid on, handles out. Cooking rather than eating. -->
+  <style>
+    svg { color: #15616D; }
+    @media (prefers-color-scheme: dark) { svg { color: #58C6D2; } }
+  </style>
+  <g fill="currentColor">
+    <circle cx="16" cy="6" r="2.5"/>
+    <rect x="2" y="9" width="28" height="3.4" rx="1.7"/>
+    <rect x="0" y="14" width="5.5" height="3.2" rx="1.6"/>
+    <rect x="26.5" y="14" width="5.5" height="3.2" rx="1.6"/>
+    <path d="M5 13.6 h22 v6.9 a5.5 5.5 0 0 1 -5.5 5.5 h-11 a5.5 5.5 0 0 1 -5.5 -5.5 z"/>
+  </g>
+</svg>
diff --git a/mockups/favicon/c-lusikka.svg b/mockups/favicon/c-lusikka.svg
new file mode 100644
index 0000000..ae66deb
--- /dev/null
+++ b/mockups/favicon/c-lusikka.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Foodster">
+  <!-- Lusikka: one spoon, set on the diagonal. A fork is the cliché; a spoon
+       on its own is not, and it stays a single solid shape at any size. -->
+  <style>
+    svg { color: #15616D; }
+    @media (prefers-color-scheme: dark) { svg { color: #58C6D2; } }
+  </style>
+  <g fill="currentColor" transform="rotate(34 16 16)">
+    <ellipse cx="16" cy="9.5" rx="5.4" ry="7"/>
+    <rect x="13.9" y="15" width="4.2" height="14" rx="2.1"/>
+  </g>
+</svg>
diff --git a/mockups/favicon/d-ruisleipa.svg b/mockups/favicon/d-ruisleipa.svg
new file mode 100644
index 0000000..a34335b
--- /dev/null
+++ b/mockups/favicon/d-ruisleipa.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Foodster">
+  <!-- Ruisleipä: the Finnish rye loaf, hole in the middle. Nothing else in a
+       tab strip looks like this — which is the point, and also the risk. -->
+  <style>
+    .hole { fill: #ECEDE8; }
+    .loaf { fill: #6B4636; }
+    @media (prefers-color-scheme: dark) {
+      .hole { fill: #121316; }
+      .loaf { fill: #9A6E52; }
+    }
+  </style>
+  <circle class="loaf" cx="16" cy="16" r="14"/>
+  <circle class="hole" cx="16" cy="16" r="3.8"/>
+</svg>
diff --git a/mockups/favicon/index.html b/mockups/favicon/index.html
new file mode 100644
index 0000000..ff9acca
--- /dev/null
+++ b/mockups/favicon/index.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en" data-theme="auto">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Foodster — favicon options</title>
+<link rel="icon" href="a-kulho.svg" type="image/svg+xml">
+<style>
+:root{
+  color-scheme: light dark;
+  --paper: light-dark(#ECEDE8, #121316);
+  --card:  light-dark(#FFFFFF, #1C1E22);
+  --ink:   light-dark(#14161A, #E9EAE5);
+  --muted: light-dark(#6B6F6A, #8B8F89);
+  --line:  light-dark(#D5D6D0, #2C2F34);
+}
+html[data-theme="light"]{color-scheme:only light;}
+html[data-theme="dark"] {color-scheme:only dark;}
+*{box-sizing:border-box;}
+body{margin:0;background:var(--paper);color:var(--ink);
+  font-family:system-ui,sans-serif;font-size:16px;line-height:1.45;}
+.wrap{max-width:900px;margin:0 auto;padding:24px 20px 60px;}
+h1{font-size:20px;letter-spacing:-.02em;margin:0 0 4px;}
+.lede{margin:0 0 22px;color:var(--muted);font-size:14px;}
+.themebtn{font:inherit;font-size:13px;background:var(--card);border:1px solid var(--line);
+  color:var(--muted);padding:7px 12px;border-radius:7px;cursor:pointer;margin-bottom:22px;}
+
+.opt{background:var(--card);border:1px solid var(--line);border-radius:12px;
+  padding:18px;margin-bottom:14px;}
+.opt h2{font-size:16px;margin:0 0 2px;letter-spacing:-.02em;}
+.opt p{margin:0 0 14px;font-size:13.5px;color:var(--muted);}
+.sizes{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;}
+.size{text-align:center;}
+.size img{display:block;}
+.size span{display:block;margin-top:6px;font-size:10px;letter-spacing:.06em;
+  text-transform:uppercase;color:var(--muted);}
+
+/* A browser tab is the real test: 16px against the tab strip. */
+.tabsim{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
+.tab{display:flex;align-items:center;gap:7px;border-radius:8px 8px 0 0;
+  padding:7px 14px 7px 10px;font-size:12.5px;}
+.tab img{width:16px;height:16px;}
+.onwhite{background:#fff;color:#333;border:1px solid #ddd;}
+.ondark{background:#1b1d22;color:#bbb;border:1px solid #33363c;}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>Foodster — favicon, round two</h1>
+  <p class="lede">Objects from the kitchen rather than geometry. The 16&nbsp;px row and the tab strips are the only test that counts.</p>
+  <button class="themebtn" id="t">Theme: auto</button>
+
+  <div class="opt">
+    <h2>A · Kulho</h2>
+    <p>A bowl with steam. This household's catalog is half <em>keitto</em>, so soup is honest branding.</p>
+    <div class="sizes">
+      <div class="size"><img src="a-kulho.svg" width="16" height="16"><span>16</span></div>
+      <div class="size"><img src="a-kulho.svg" width="32" height="32"><span>32</span></div>
+      <div class="size"><img src="a-kulho.svg" width="64" height="64"><span>64</span></div>
+      <div class="size"><img src="a-kulho.svg" width="180" height="180"><span>180</span></div>
+    </div>
+    <div class="tabsim">
+      <span class="tab onwhite"><img src="a-kulho.svg" alt="">Foodster</span>
+      <span class="tab ondark"><img src="a-kulho.svg" alt="">Foodster</span>
+    </div>
+  </div>
+
+  <div class="opt">
+    <h2>B · Kattila</h2>
+    <p>A pot with the lid on and handles out. About cooking rather than eating.</p>
+    <div class="sizes">
+      <div class="size"><img src="b-kattila.svg" width="16" height="16"><span>16</span></div>
+      <div class="size"><img src="b-kattila.svg" width="32" height="32"><span>32</span></div>
+      <div class="size"><img src="b-kattila.svg" width="64" height="64"><span>64</span></div>
+      <div class="size"><img src="b-kattila.svg" width="180" height="180"><span>180</span></div>
+    </div>
+    <div class="tabsim">
+      <span class="tab onwhite"><img src="b-kattila.svg" alt="">Foodster</span>
+      <span class="tab ondark"><img src="b-kattila.svg" alt="">Foodster</span>
+    </div>
+  </div>
+
+  <div class="opt">
+    <h2>C · Lusikka</h2>
+    <p>One spoon on the diagonal. A fork is the cliché; a lone spoon is not, and it stays one solid shape at any size.</p>
+    <div class="sizes">
+      <div class="size"><img src="c-lusikka.svg" width="16" height="16"><span>16</span></div>
+      <div class="size"><img src="c-lusikka.svg" width="32" height="32"><span>32</span></div>
+      <div class="size"><img src="c-lusikka.svg" width="64" height="64"><span>64</span></div>
+      <div class="size"><img src="c-lusikka.svg" width="180" height="180"><span>180</span></div>
+    </div>
+    <div class="tabsim">
+      <span class="tab onwhite"><img src="c-lusikka.svg" alt="">Foodster</span>
+      <span class="tab ondark"><img src="c-lusikka.svg" alt="">Foodster</span>
+    </div>
+  </div>
+
+  <div class="opt">
+    <h2>D · Ruisleipä</h2>
+    <p>The rye loaf with its hole. Nothing else in a tab strip looks like this — which is the appeal and also the risk of reading as a ring.</p>
+    <div class="sizes">
+      <div class="size"><img src="d-ruisleipa.svg" width="16" height="16"><span>16</span></div>
+      <div class="size"><img src="d-ruisleipa.svg" width="32" height="32"><span>32</span></div>
+      <div class="size"><img src="d-ruisleipa.svg" width="64" height="64"><span>64</span></div>
+      <div class="size"><img src="d-ruisleipa.svg" width="180" height="180"><span>180</span></div>
+    </div>
+    <div class="tabsim">
+      <span class="tab onwhite"><img src="d-ruisleipa.svg" alt="">Foodster</span>
+      <span class="tab ondark"><img src="d-ruisleipa.svg" alt="">Foodster</span>
+    </div>
+  </div>
+</div>
+<script>
+const h=document.documentElement,b=document.getElementById('t'),m=['auto','light','dark'];
+b.onclick=()=>{const n=m[(m.indexOf(h.dataset.theme)+1)%3];h.dataset.theme=n;b.textContent='Theme: '+n;};
+</script>
+</body>
+</html>
diff --git a/scripts/smoke.sh b/scripts/smoke.sh
index 47c4fc6..e9eed2e 100755
--- a/scripts/smoke.sh
+++ b/scripts/smoke.sh
@@ -54,6 +54,17 @@ check "healthz needs no password" \
 check "datastar client is served" \
 	"$(curl -s -o /dev/null -w '%{http_code}' -u ":$pass" "http://$addr/static/datastar.js")" "200"
 
+check "favicon is served" \
+	"$(curl -s -o /dev/null -w '%{http_code}' -u ":$pass" "http://$addr/static/favicon.svg")" "200"
+
+check "apple touch icon is served" \
+	"$(curl -s -o /dev/null -w '%{http_code}' -u ":$pass" "http://$addr/static/apple-touch-icon.png")" "200"
+
+# A manifest served as octet-stream is silently ignored by the browser.
+check "manifest has the right content type" \
+	"$(curl -s -o /dev/null -w '%{content_type}' -u ":$pass" "http://$addr/static/manifest.webmanifest")" \
+	"application/manifest+json"
+
 check "catalog starts empty" \
 	"$(curl -s -u ":$pass" "http://$addr/ruoat")" "0 pääruokaa"