jyapayne/houserules
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add knight-silhouette favicon, theme-color, and meta description

Browse source 
Previously the site had no favicon — browsers showed a generic tab
icon and PWA installs would have used the default. Adds:

- packages/chess/public/favicon.svg — knight on a dark rounded tile,
  purpose-built for small sizes (fill-only, high contrast).
- <link rel=icon type=image/svg+xml> + apple-touch-icon wiring in
  index.html so the SVG serves as the primary tab icon on every
  platform (Chrome/Firefox/Safari desktop + iOS home-screen).
- theme-color (#0f172a) matching the favicon tile so mobile
  browser chrome coordinates with the site's dark accent.
- meta description for search-result snippets and link previews.
This commit is contained in:
Joey Yakimowich-Payne 2026-04-21 13:35:42 -06:00
commit 3bdfba38e0
No known key found for this signature in database
2 changed files with 31 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/chess/index.html
View file

@ -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>

21
packages/chess/public/favicon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB