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

## Summary

Straightforward slice. No favicon, OG tags, or logo currently exist. The `index.html` is minimal (no meta tags beyond viewport/theme-color). The header brand area is a plain `<span>Chrysopedia</span>` inside a Link. No `public/` directory exists — needs to be created for static assets (Vite copies `public/` contents to `dist/` root at build time).

## Requirement Coverage

No formal requirement ID for this slice. Driven by roadmap definition:
- Browser tab shows custom favicon
- URL sharing produces preview card (OG tags)
- Logo visible in header next to "Chrysopedia"

## Implementation Landscape

### Current State

| Area | State |
|------|-------|
| `frontend/index.html` | Minimal `<head>`: charset, viewport, theme-color (`#0a0a12`), title. No favicon link, no OG meta tags, no description meta. |
| `frontend/public/` | Does not exist. Needs to be created — Vite copies contents to `dist/` root. |
| Header brand | `App.tsx` line 64-65: `<Link to="/" className="app-header__brand"><span>Chrysopedia</span></Link>`. CSS at line 975 is text-only, no image. |
| Accent color | Cyan `#22d3ee` on dark `#0a0a12` background (D017). |
| Docker build | `Dockerfile.web` copies `frontend/` into build stage, runs `npm run build`, copies `dist/` to nginx. `public/` will flow through automatically. |
| OG tag library | None installed. No react-helmet or equivalent. Not needed — static OG tags in `index.html` are sufficient for an SPA without SSR. Social crawlers don't execute JS, so per-page dynamic OG is out of scope. |

### Files to Change

| File | Change |
|------|--------|
| `frontend/public/favicon.svg` | **New.** SVG favicon — a simple geometric mark using the cyan accent color. SVG is supported by all modern browsers and stays crisp at any size. |
| `frontend/public/favicon-32.png` | **New.** 32×32 PNG fallback for older browsers/RSS readers. |
| `frontend/public/apple-touch-icon.png` | **New.** 180×180 PNG for iOS home screen bookmarks. |
| `frontend/public/og-image.png` | **New.** 1200×630 OG image for social sharing. Dark background with "Chrysopedia" text and accent color. Can be generated with a simple HTML-to-image approach or created as a static asset. |
| `frontend/index.html` | Add: favicon `<link>` tags, OG meta tags (`og:title`, `og:description`, `og:image`, `og:type`, `og:url`), Twitter card meta tags, `<meta name="description">`. |
| `frontend/src/App.tsx` | Add an inline SVG logo or `<img>` before the brand `<span>` inside `.app-header__brand`. |
| `frontend/src/App.css` | Style the logo element (sizing, spacing next to text). |

### Natural Seams

Three independent units:

1. **Favicon + meta tags** — Create `public/` directory, add favicon files, update `index.html` with favicon links + OG tags + description. Verifiable by inspecting built HTML and checking `<link rel="icon">` in browser.

2. **OG image** — Create the `og-image.png` static asset. This is referenced by the OG tags from task 1 but can be created independently.

3. **Header logo** — Add logo SVG inline in `App.tsx` next to brand text, style in `App.css`. Independent of the other two.

Tasks 1 and 2 could be merged since the OG image is just a static file that the meta tags reference.

### Favicon Approach

SVG favicon is the modern standard — single file, scales to any tab/bookmark size. Add a 32px PNG fallback via `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">` and an Apple touch icon. The SVG can be a simple geometric shape (e.g., stylized "C" or abstract mark) in cyan `#22d3ee`.

### OG Tags Approach

Static tags in `index.html`:
```html
<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" />
```

The `og:url` should use the production domain. Since the project may be accessed at different URLs (ub01:8096, chrysopedia.com), the simplest approach is to omit `og:url` (social platforms infer it from the request URL) or use the primary domain if one is configured.

### Logo Approach

Inline SVG in `App.tsx` keeps the logo as a React component — no extra HTTP request, instant render, CSS-colorable. Same geometric mark as the favicon for brand consistency. Size: ~24px height to sit alongside the 1.125rem brand text.

## Recommendation

Merge into 2 tasks:
1. **Favicon + OG tags + OG image**: Create `frontend/public/` with all static assets, update `index.html`. One task because the files are all static assets and the HTML changes reference them.
2. **Header logo**: Modify `App.tsx` and `App.css` to add the logo mark.

Verification: `npm run build` succeeds, inspect `dist/index.html` for meta tags, inspect `dist/` for favicon files, visual check of header logo in browser.
