python-maze/GENERATE_IMAGES_INSTRUCTIONS.md

Generate Required Images for SEO

Quick Start

Run the image generation script:

# 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:

# 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:

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:

# 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