---
estimated_steps: 43
estimated_files: 5
skills_used: []
---

# T01: Create favicon assets, OG image, and wire meta tags in index.html

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'
```

## Inputs

- ``frontend/index.html` — existing minimal HTML to update with meta tags`

## Expected Output

- ``frontend/public/favicon.svg` — SVG favicon with cyan accent mark`
- ``frontend/public/favicon-32.png` — 32×32 PNG favicon fallback`
- ``frontend/public/apple-touch-icon.png` — 180×180 PNG Apple touch icon`
- ``frontend/public/og-image.png` — 1200×630 OG social sharing image`
- ``frontend/index.html` — updated with favicon links, OG tags, Twitter tags, description meta`

## Verification

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
