diff --git a/packages/chess/index.html b/packages/chess/index.html
index 0c9bc10..549abde 100644
--- a/packages/chess/index.html
+++ b/packages/chess/index.html
@@ -3,6 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Primary SVG favicon — scales cleanly from 16px tab icons up
+         to PWA install tiles. Vite serves everything under public/
+         at the site root, so the absolute path works in dev + build. -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <!-- iOS / macOS home screen + Safari pinned tabs. apple-touch-icon
+         only accepts PNG in the spec, but modern Safari happily
+         accepts SVG and rasterizes it at the right size. -->
+    <link rel="apple-touch-icon" href="/favicon.svg" />
+    <meta name="theme-color" content="#0f172a" />
+    <meta name="description" content="Houserules — chess, your rules. A custom-rules chess demo with a modifier profile editor and layout designer." />
     <title>Houserules</title>
   </head>
   <body>
diff --git a/packages/chess/public/favicon.svg b/packages/chess/public/favicon.svg
new file mode 100644
index 0000000..a3acc09
--- /dev/null
+++ b/packages/chess/public/favicon.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <!-- Rounded dark tile background — high contrast so the knight
+       silhouette reads cleanly at 16×16 tab-favicon size. -->
+  <rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#0f172a"/>
+  <!-- Knight silhouette adapted from the Wikimedia chess SVG set
+       (public domain). Scaled 1.3× and centered in the 64×64 tile,
+       fill-only so stroke-anti-aliasing doesn't soften it at tiny
+       sizes. -->
+  <g transform="translate(6.5,5) scale(1.15)" fill="#f8fafc">
+    <path d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" />
+    <path d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31 C 9.958,30.06 12.41,27.96 11,28 C 10,28 11.19,29.23 10,30 C 9,30 5.997,31 6,26 C 6,24 12,14 12,14 C 12,14 13.89,12.1 14,10.5 C 13.27,9.506 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.28,8.008 21,7 C 22,7 22,10 22,10 z" />
+    <!-- Eye + mane highlights in the tile background color so the
+         knight "reads" as a knight rather than an amorphous blob. -->
+    <circle cx="9" cy="25.5" r="1" fill="#0f172a"/>
+    <path
+      d="M 15 15.5 A 0.5 1.5 0 1 1 14,15.5 A 0.5 1.5 0 1 1 15 15.5 z"
+      transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
+      fill="#0f172a"/>
+  </g>
+</svg>
