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

**Goal:** Browser tab shows custom favicon. URL sharing produces preview card. Logo visible in header next to Chrysopedia.
**Demo:** After this: Browser tab shows custom favicon. URL sharing produces preview card. Logo visible in header next to Chrysopedia.

## Tasks
- [x] **T01: Added favicon (SVG + 32px PNG), apple-touch-icon, OG social image, and all meta tags (OG, Twitter card, description) to frontend** — Create the `frontend/public/` directory with all brand static assets (SVG favicon, 32px PNG fallback, Apple touch icon, OG image) and update `frontend/index.html` with favicon link tags, OG meta tags, Twitter card tags, and a description meta tag.

## Steps

1. Create `frontend/public/` directory.
2. Create `frontend/public/favicon.svg` — a simple geometric mark (stylized "C" or abstract shape) using the cyan accent color `#22d3ee` on a dark `#0a0a12` background. Keep the SVG minimal (under 1KB). The mark should work at 16px tab size.
3. Create `frontend/public/favicon-32.png` — 32×32 PNG version of the same mark. Since we can't run image tools, create a minimal valid PNG programmatically using Python's built-in libraries, or create a simple SVG-based approach. Alternatively, create a small inline data approach. The simplest path: use a Python script with the `struct` and `zlib` modules to generate a minimal 32×32 PNG with the cyan mark on dark background.
4. Create `frontend/public/apple-touch-icon.png` — 180×180 PNG for iOS. Same approach as step 3 but larger.
5. Create `frontend/public/og-image.png` — 1200×630 PNG for social sharing. Dark background `#0a0a12` with "Chrysopedia" text and cyan accent. Generate programmatically.
6. Update `frontend/index.html` to add inside `<head>`:
   - `<link rel="icon" type="image/svg+xml" href="/favicon.svg" />`
   - `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />`
   - `<link rel="apple-touch-icon" href="/apple-touch-icon.png" />`
   - `<meta name="description" content="Music production technique encyclopedia" />`
   - `<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" />`
   - `<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" />`
7. Run `cd frontend && npm run build` and verify all assets appear in `dist/` and meta tags are present in `dist/index.html`.

## Must-Haves

- [ ] `frontend/public/favicon.svg` exists and is valid SVG using `#22d3ee` accent
- [ ] `frontend/public/favicon-32.png` exists and is valid PNG
- [ ] `frontend/public/apple-touch-icon.png` exists and is valid PNG
- [ ] `frontend/public/og-image.png` exists and is valid PNG
- [ ] `frontend/index.html` has all favicon `<link>` tags
- [ ] `frontend/index.html` has OG + Twitter meta tags + description
- [ ] `npm run build` succeeds

## Verification

```bash
cd frontend && npm run build
test -f dist/favicon.svg && echo 'favicon.svg OK'
test -f dist/favicon-32.png && echo 'favicon-32.png OK'
test -f dist/apple-touch-icon.png && echo 'apple-touch-icon OK'
test -f dist/og-image.png && echo 'og-image OK'
grep -q 'rel="icon"' dist/index.html && echo 'icon link OK'
grep -q 'og:title' dist/index.html && echo 'og:title OK'
grep -q 'og:description' dist/index.html && echo 'og:description OK'
grep -q 'og:image' dist/index.html && echo 'og:image OK'
grep -q 'twitter:card' dist/index.html && echo 'twitter:card OK'
grep -q 'name="description"' dist/index.html && echo 'description OK'
```
  - Estimate: 45m
  - Files: frontend/public/favicon.svg, frontend/public/favicon-32.png, frontend/public/apple-touch-icon.png, frontend/public/og-image.png, frontend/index.html
  - Verify: cd frontend && npm run build && test -f dist/favicon.svg && test -f dist/favicon-32.png && test -f dist/apple-touch-icon.png && test -f dist/og-image.png && grep -q 'og:title' dist/index.html && grep -q 'rel="icon"' dist/index.html
- [x] **T02: Added inline SVG logo mark (cyan arc + dot from favicon) to header brand area with flex alignment** — Add an inline SVG logo mark to the header, positioned to the left of the "Chrysopedia" text. The logo should use the same geometric mark as the favicon for brand consistency.

## Steps

1. Read `frontend/public/favicon.svg` (created in T01) to understand the mark design.
2. Edit `frontend/src/App.tsx` — inside the `.app-header__brand` Link (around line 64-65), add an inline SVG element before the `<span>Chrysopedia</span>`. The SVG should be the same mark as the favicon, sized at ~24px height. Wrap it in a `<span className="app-header__logo">` for styling.
3. Edit `frontend/src/App.css` — add styles for `.app-header__logo`:
   - Display inline-flex, vertical alignment middle
   - Width/height: 24px
   - Margin-right: 0.5rem (gap between logo and text)
   - The SVG inside should fill the container
4. Also update `.app-header__brand` to use `display: flex; align-items: center; gap: 0.5rem;` for proper alignment of logo + text.
5. Run `cd frontend && npm run build` to verify zero errors.

## Must-Haves

- [ ] Inline SVG logo mark in App.tsx header brand area
- [ ] Logo uses cyan `#22d3ee` accent color, matching favicon
- [ ] Logo sized ~24px, properly aligned with brand text
- [ ] CSS styles for `.app-header__logo` and updated `.app-header__brand`
- [ ] `npm run build` succeeds with zero errors

## Verification

```bash
cd frontend && npm run build
grep -q 'app-header__logo' src/App.tsx && echo 'logo class in TSX OK'
grep -q 'app-header__logo' src/App.css && echo 'logo class in CSS OK'
grep -q '<svg' src/App.tsx && echo 'inline SVG OK'
```
  - Estimate: 20m
  - Files: frontend/src/App.tsx, frontend/src/App.css
  - Verify: cd frontend && npm run build && grep -q 'app-header__logo' src/App.tsx && grep -q 'app-header__logo' src/App.css
