# Scrum4Me — Icon installatie voor Next.js

## Bestandslocaties

Kopieer de bestanden naar de juiste plek in je Next.js App Router project:

```
app/
  favicon.ico          ← favicon.ico
  icon-192.png         ← icon-192.png (rename: icon.png)
  apple-icon.png       ← icon-180.png (rename: apple-icon.png)

public/
  icon-512.png         ← voor PWA manifest
  icon-192.png         ← voor PWA manifest

components/
  shared/
    app-icon.tsx       ← herbruikbare React component
```

## Stap 1 — Favicon en app icons

```bash
# Kopieer naar app/ map (Next.js pikt deze automatisch op)
cp favicon.ico         ../app/favicon.ico
cp icon-192.png        ../app/icon.png
cp icon-180.png        ../app/apple-icon.png

# Kopieer naar public/ voor manifest
cp icon-512.png        ../public/icon-512.png
cp icon-192.png        ../public/icon-192.png
```

## Stap 2 — Metadata in app/layout.tsx

```tsx
// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Scrum4Me',
    template: '%s — Scrum4Me',
  },
  description: 'Lichtgewicht Scrum-planner voor solo developers en kleine teams',
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '48x48' },
      { url: '/icon.png', sizes: '192x192', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
  manifest: '/manifest.json',
}
```

## Stap 3 — PWA manifest (optioneel)

Maak `public/manifest.json` aan:

```json
{
  "name": "Scrum4Me",
  "short_name": "Scrum4Me",
  "description": "Lichtgewicht Scrum-planner voor solo developers en kleine teams",
  "start_url": "/dashboard",
  "display": "standalone",
  "background_color": "#0d0a14",
  "theme_color": "#7c3aed",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
```

## Stap 4 — AppIcon component gebruiken

```tsx
// In de navigatiebalk:
import { AppIcon } from '@/components/shared/app-icon'

export function Navbar() {
  return (
    <nav>
      <div className="flex items-center gap-2">
        <AppIcon size={28} />
        <span className="font-semibold text-foreground">Scrum4Me</span>
      </div>
    </nav>
  )
}
```

## Gegenereerde bestanden — overzicht

| Bestand | Formaat | Gebruik |
|---|---|---|
| `favicon.ico` | ICO (16+32+48) | Browser tabblad |
| `icon-16.png` | PNG 16×16 | Browser fallback |
| `icon-32.png` | PNG 32×32 | Browser retina tabblad |
| `icon-48.png` | PNG 48×48 | Windows taskbar |
| `icon-76.png` | PNG 76×76 | iPad non-retina |
| `icon-120.png` | PNG 120×120 | iPhone retina |
| `icon-144.png` | PNG 144×144 | Windows tile |
| `icon-152.png` | PNG 152×152 | iPad retina |
| `icon-180.png` | PNG 180×180 | Apple touch icon |
| `icon-192.png` | PNG 192×192 | Android / PWA |
| `icon-512.png` | PNG 512×512 | PWA splash / stores |
| `icon-master.svg` | SVG | Bronbestand (master) |
| `icon-simple.svg` | SVG | Vereenvoudigd voor kleine formaten |
| `app-icon.tsx` | React | Inline SVG component |