# S03: Brand Minimum (Favicon, OG Tags, Logo) — UAT

**Milestone:** M016
**Written:** 2026-04-03T05:48:09.839Z

# S03 UAT: Brand Minimum (Favicon, OG Tags, Logo)

## Preconditions
- Frontend built successfully (`cd frontend && npm run build`)
- App running (locally or via Docker on ub01:8096)

## Test Cases

### TC1: Favicon displays in browser tab
1. Open the site in a browser
2. **Expected:** Browser tab shows a cyan arc+dot mark on dark background (not the default browser/framework icon)
3. Check favicon source: right-click tab → inspect → should reference `/favicon.svg`

### TC2: PNG favicon fallback
1. Open the site in a browser that doesn't support SVG favicons (or inspect network tab)
2. **Expected:** `/favicon-32.png` is available as 32x32 fallback
3. Verify: `curl -s http://localhost:8096/favicon-32.png | file -` → should report PNG image data

### TC3: Apple touch icon
1. Inspect page source or `curl http://localhost:8096/apple-touch-icon.png | file -`
2. **Expected:** Valid 180x180 PNG returned

### TC4: OG meta tags present for social sharing
1. View page source of the homepage
2. **Expected:** All of these meta tags present in `<head>`:
   - `<meta property="og:title" content="Chrysopedia" />`
   - `<meta property="og:description" content="Music production technique encyclopedia" />`
   - `<meta property="og:image" content="/og-image.png" />`
   - `<meta property="og:type" content="website" />`
3. Verify OG image accessible: `curl -sI http://localhost:8096/og-image.png` → 200 OK

### TC5: Twitter card meta tags
1. View page source of the homepage
2. **Expected:**
   - `<meta name="twitter:card" content="summary_large_image" />`
   - `<meta name="twitter:title" content="Chrysopedia" />`
   - `<meta name="twitter:description" content="Music production technique encyclopedia" />`
   - `<meta name="twitter:image" content="/og-image.png" />`

### TC6: Description meta tag
1. View page source
2. **Expected:** `<meta name="description" content="Music production technique encyclopedia" />`

### TC7: Logo visible in header
1. Open any page on the site
2. **Expected:** A cyan arc+dot mark (~24px) appears to the left of "Chrysopedia" text in the header
3. The logo should be vertically centered with the text
4. The logo should NOT be announced by screen readers (aria-hidden)

### TC8: Logo uses correct brand color
1. Inspect the inline SVG in the header
2. **Expected:** SVG paths use `#22d3ee` (cyan accent) — matching the favicon

### Edge Cases

### EC1: Social sharing preview
1. Paste the site URL into a social platform preview tool (e.g., Twitter Card Validator, Facebook Sharing Debugger, or opengraph.xyz)
2. **Expected:** Preview card shows "Chrysopedia" title, "Music production technique encyclopedia" description, and the OG image
3. **Note:** OG image URL must be absolute for external validators — current implementation uses relative `/og-image.png` which works when the site has a canonical URL configured

### EC2: Mobile favicon
1. Open the site on iOS Safari and add to home screen
2. **Expected:** Home screen icon uses the apple-touch-icon (180px version)
