# Favicon Generation Instructions

The following favicon files are referenced in the site but need to be generated:

- `favicon-16x16.png` - 16x16px PNG favicon
- `favicon-32x32.png` - 32x32px PNG favicon  
- `apple-touch-icon.png` - 180x180px PNG for Apple devices
- `og-image.png` - 1200x630px PNG for social media sharing (optional, currently using SVG)

## How to Generate

### Option 1: Use an Online Tool
Visit https://realfavicongenerator.net/ and upload your source image (coffee emoji or custom design).

### Option 2: Use ImageMagick (if available)
If you have a source PNG image:

```bash
# 16x16
convert source.png -resize 16x16 favicon-16x16.png

# 32x32
convert source.png -resize 32x32 favicon-32x32.png

# Apple touch icon
convert source.png -resize 180x180 apple-touch-icon.png

# OG image
convert source.png -resize 1200x630 og-image.png
```

### Option 3: Use the SVG favicon
The current `favicon.svg` (coffee emoji) works in modern browsers. The PNG variants are fallbacks for older browsers and specific platforms.

## Current Status

- ✅ `favicon.svg` - Exists (coffee emoji)
- ❌ `favicon-16x16.png` - Needs to be created
- ❌ `favicon-32x32.png` - Needs to be created
- ❌ `apple-touch-icon.png` - Needs to be created
- ✅ `og-image.svg` - Created (SVG placeholder)
- ⚠️  `og-image.png` - Optional (browsers support SVG, but PNG is more compatible)

## Design Recommendations

Use the cozy coffee theme colors:
- Background: `#1a1410` (dark coffee)
- Accent: `#e8bf8e` (light coffee/cream)
- Text: `#f4e9d8` (cream)

The favicon should be simple and recognizable at small sizes. The coffee emoji ☕ is perfect!