diff --git a/docs/icon.html b/docs/icon.html
new file mode 100644
index 0000000..03f92f9
--- /dev/null
+++ b/docs/icon.html
@@ -0,0 +1 @@
+<!doctype html><html><body style="margin:0;background:#8a5a2b"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="180" height="180" style="display:block"><rect width="32" height="32" fill="#8a5a2b"/><circle cx="16" cy="17" r="9" fill="#f0d58a" stroke="#a67c1a" stroke-width="1.5"/><path d="M9 20v-8l3.5 4 3.5-6 3.5 6 3.5-4v8z" fill="#6b4a0f"/></svg></body></html>
diff --git a/docs/og-card.html b/docs/og-card.html
new file mode 100644
index 0000000..c9d8e34
--- /dev/null
+++ b/docs/og-card.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><style>
+  html,body{margin:0;background:#14181a}
+  .card{width:1200px;height:630px;display:flex;align-items:center;gap:64px;padding:0 80px;box-sizing:border-box;background:#14181a;color:#e6dfcf;font-family:'Iowan Old Style',Georgia,serif}
+  .board{flex:0 0 470px;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
+  h1{font-weight:300;font-size:92px;letter-spacing:-.01em;margin:0 0 14px}
+  p{font-size:31px;line-height:1.35;color:#9ea59e;margin:0}
+  p b{color:#e6dfcf;font-weight:500}
+  .foot{margin-top:28px;font-size:24px;color:#626b66}
+</style></head><body><div class="card">
+<svg class="board" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
+  <rect width="110" height="110" rx="4" fill="#8a5a2b"/>
+  <g id="grid"></g>
+</svg>
+<div>
+  <h1>Hnefatafl</h1>
+  <p><b>The Viking board game.</b> One king, one throne, four corners, and a ring of attackers closing in. Play the bot or a friend, by Copenhagen rules or Linnaeus's Tablut.</p>
+  <p class="foot">tafl.kestrelsnest.social · free, no accounts</p>
+</div></div>
+<script>
+  const g = document.getElementById('grid'); const ns = 'http://www.w3.org/2000/svg';
+  const el = (t, a) => { const e = document.createElementNS(ns, t); for (const k in a) e.setAttribute(k, a[k]); g.appendChild(e); };
+  for (let r = 0; r < 11; r++) for (let c = 0; c < 11; c++) {
+    const corner = (r === 0 || r === 10) && (c === 0 || c === 10), throne = r === 5 && c === 5;
+    el('rect', { x: c * 10, y: r * 10, width: 10, height: 10, fill: corner ? 'rgba(224,101,92,0.4)' : throne ? 'rgba(240,165,58,0.4)' : 'rgba(255,240,210,0.08)', stroke: 'rgba(30,16,6,0.5)', 'stroke-width': 0.4 });
+  }
+  const a = [[3,0],[4,0],[5,0],[6,0],[7,0],[5,1],[0,3],[10,3],[0,4],[10,4],[0,5],[1,5],[9,5],[10,5],[0,6],[10,6],[0,7],[10,7],[5,9],[3,10],[4,10],[5,10],[6,10],[7,10]];
+  const d = [[5,3],[4,4],[5,4],[6,4],[3,5],[4,5],[6,5],[7,5],[4,6],[5,6],[6,6],[5,7]];
+  for (const [x, y] of a) el('circle', { cx: x * 10 + 5, cy: y * 10 + 5, r: 3.4, fill: '#2a2320', stroke: '#0d0a08', 'stroke-width': 0.6 });
+  for (const [x, y] of d) el('circle', { cx: x * 10 + 5, cy: y * 10 + 5, r: 3.4, fill: '#ece4d0', stroke: '#b9ab8b', 'stroke-width': 0.6 });
+  el('circle', { cx: 55, cy: 55, r: 3.6, fill: '#f0d58a', stroke: '#a67c1a', 'stroke-width': 0.6 });
+  el('path', { d: 'M52.6 56.4 l0 -2.6 l1.3 1.4 l1.1 -2.3 l1.1 2.3 l1.3 -1.4 l0 2.6 z', fill: '#6b4a0f' });
+</script></body></html>
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
new file mode 100644
index 0000000..697512f
Binary files /dev/null and b/static/apple-touch-icon.png differ
diff --git a/static/og.png b/static/og.png
new file mode 100644
index 0000000..448612e
Binary files /dev/null and b/static/og.png differ
