# Generate Required Images for SEO

## Quick Start

Run the image generation script:

```bash
# Navigate to project root
cd C:\dev\mazer

# Run the image generator
python generate_images.py
```

This will create all required images in `web/static/images/`:

## Generated Images

### Favicons
- ✅ `favicon-16x16.png` - Browser tab icon (16×16)
- ✅ `favicon-32x32.png` - Browser tab icon (32×32)

### Social Media
- ✅ `twitter-image.png` - Twitter card preview (1200×675)
- ✅ `og-image.png` - Facebook/LinkedIn preview (1200×630)

### Mobile & PWA
- ✅ `apple-touch-icon.png` - iOS home screen icon (180×180)
- ✅ `icon-192x192.png` - PWA icon (192×192)
- ✅ `icon-512x512.png` - PWA icon (512×512)

### Other
- ✅ `screenshot.png` - General screenshot (1280×720)

## Design Features

All images follow the **Neo-Brutalism** design aesthetic:

### Color Palette
- **Yellow**: #FFE500 (Neon yellow - primary brand color)
- **Black**: #000000 (Borders and text)
- **Pink**: #FF10F0 (Neon pink - accent)
- **Cyan**: #00F0FF (Neon cyan - accent)
- **Green**: #39FF14 (Neon green - accent)
- **White**: #FFFFFF (Background)

### Design Elements
- ✅ Thick black borders (6-10px)
- ✅ Hard drop shadows (no blur)
- ✅ Flat colors (no gradients)
- ✅ Bold typography
- ✅ High contrast

## Manual Creation (Optional)

If you prefer to create custom images manually:

### Twitter Image (1200×675)
1. Use Canva, Figma, or Photoshop
2. Set canvas to 1200×675 pixels
3. Add yellow background (#FFE500)
4. Add title "MAZE GENERATOR" in bold black text
5. Add 3 boxes with features: "8 ALGORITHMS", "ANIMATED SOLVING", "NEO-BRUTALISM"
6. Use colors: pink, cyan, green for the boxes
7. Add thick black borders (6-8px)
8. Export as PNG

### OG Image (1200×630)
1. Set canvas to 1200×630 pixels
2. Yellow background with black border
3. Title: "MAZE GENERATOR"
4. Subtitle: "8 ALGORITHMS • ANIMATED SOLVING"
5. Optional: Add simple maze pattern
6. Export as PNG

### Favicons
1. Create 32×32 and 16×16 versions
2. Yellow background
3. Simple "M" letter or maze pattern
4. Black border
5. Export as PNG

### Apple Touch Icon (180×180)
1. Create 180×180 canvas
2. Yellow background
3. Large "M" letter in center
4. Thick black border
5. Export as PNG

## Image Optimization

After generating, optimize for web:

```bash
# Using ImageOptim (Mac)
imageoptim web/static/images/*.png

# Using pngquant (cross-platform)
pngquant --quality=80-95 web/static/images/*.png

# Using TinyPNG web service
# Upload to https://tinypng.com/
```

## Verification

Check that all images exist:

```bash
ls -lh web/static/images/
```

Expected output:
```
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
icon-192x192.png
icon-512x512.png
twitter-image.png
og-image.png
screenshot.png
```

## Testing

### Test Favicons
1. Start server: `python api/app.py`
2. Visit: `http://localhost:5000`
3. Check browser tab for favicon

### Test Social Media Previews
1. Deploy to production
2. Test Twitter Card: https://cards-dev.twitter.com/validator
3. Test Open Graph: https://developers.facebook.com/tools/debug/
4. Test LinkedIn: Share URL and check preview

### Test PWA Icons
1. Visit site on mobile
2. Use "Add to Home Screen"
3. Check icon appears correctly

## Alternative: Use Online Tools

If Python isn't available, use these online tools:

### Favicon Generator
- https://favicon.io/
- https://realfavicongenerator.net/

### Social Media Image Generator
- https://www.canva.com/ (templates for Twitter/OG images)
- https://www.figma.com/ (free design tool)

### Icon Generator
- https://www.pwabuilder.com/ (PWA icon generator)

## Troubleshooting

### Script Fails to Run
**Problem**: `python: command not found`

**Solution**:
```bash
# Windows
py generate_images.py

# Or install Python from python.org
# Or use Windows Store Python
```

### Images Not Showing
**Problem**: 404 error for images

**Solution**:
1. Check files exist in `web/static/images/`
2. Check Flask is serving static files
3. Clear browser cache (Ctrl+Shift+R)

### Low Quality Images
**Problem**: Images look pixelated

**Solution**:
1. Re-run script with PIL (Pillow) installed
2. Or create manually at higher DPI
3. Use vector graphics tools (Figma, Illustrator)

## Next Steps After Generation

1. ✅ Verify all 8 images are created
2. ✅ Check file sizes (should be <100KB each)
3. ✅ Test locally at `http://localhost:5000`
4. ✅ Deploy to production
5. ✅ Test with social media validators
6. ✅ Submit to Google Search Console

## Additional Resources

- **Neo-Brutalism Design**: https://neobrutalism.dev/
- **PWA Icons Guide**: https://web.dev/add-manifest/
- **OG Image Best Practices**: https://ogp.me/
- **Twitter Cards Guide**: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards