Skip to content

ICONS.md

Latest commit

 

History

History
197 lines (158 loc) · 5.44 KB

ICONS.md

File metadata and controls

197 lines (158 loc) · 5.44 KB
Raw

🎨 Icon Assets for Eldritchify PWA

Current Status

The PWA manifest.json references 8 icon sizes that need to be created before the app can be fully installable:

Required Icons

/assets/icons/icon-72x72.png
/assets/icons/icon-96x96.png
/assets/icons/icon-128x128.png
/assets/icons/icon-144x144.png
/assets/icons/icon-152x152.png
/assets/icons/icon-192x192.png
/assets/icons/icon-384x384.png
/assets/icons/icon-512x512.png

Options to Complete Icon Setup

Option 1: Create Custom Icons (Recommended)

Use the existing background.png Cthulhu artwork as the base:

  1. Extract Icon from Background

    • Use image editing tool (Photoshop, GIMP, Canva)
    • Crop/resize central Cthulhu element
    • Add dark background (#0a0e27)
    • Export at each required size

  2. Design Elements

    • Central motif: Cthulhu tentacles or eye
    • Background: Dark cosmic (#0a0e27)
    • Border: Subtle glow effect (optional)
    • Text: "E" or full "Eldritchify" logo (for larger sizes)

  3. Automated Resizing

    # Using ImageMagick (install first)
convert source.png -resize 72x72 assets/icons/icon-72x72.png
convert source.png -resize 96x96 assets/icons/icon-96x96.png
convert source.png -resize 128x128 assets/icons/icon-128x128.png
convert source.png -resize 144x144 assets/icons/icon-144x144.png
convert source.png -resize 152x152 assets/icons/icon-152x152.png
convert source.png -resize 192x192 assets/icons/icon-192x192.png
convert source.png -resize 384x384 assets/icons/icon-384x384.png
convert source.png -resize 512x512 assets/icons/icon-512x512.png

Option 2: Use Placeholder Icons (Quick Start)

Use a free icon generator service:

  1. Favicon Generator

  2. PWA Asset Generator

Option 3: Use Emoji/Text Icons (Temporary)

Create simple text-based icons:

  1. Online Tool

Implementation Steps

1. Create Icons

Choose one of the options above and generate all 8 required sizes.

2. Directory Structure

Eldritchify/
├── assets/
│   └── icons/
│       ├── icon-72x72.png
│       ├── icon-96x96.png
│       ├── icon-128x128.png
│       ├── icon-144x144.png
│       ├── icon-152x152.png
│       ├── icon-192x192.png
│       ├── icon-384x384.png
│       └── icon-512x512.png
├── background.png
├── index.html
└── manifest.json

3. Verify Manifest References

The manifest.json already contains correct references:

"icons": [
  {
    "src": "/assets/icons/icon-72x72.png",
    "sizes": "72x72",
    "type": "image/png",
    "purpose": "any maskable"
  },
  // ... 7 more sizes
]

4. Test PWA Installation

Once icons are added:

  1. Deploy to Cloudflare Pages
  2. Visit site on mobile/desktop
  3. Look for "Install App" prompt
  4. Install and verify icon appears correctly

Design Recommendations

Color Palette (from index.html)

  • Primary Dark: #0a0e27 (background)
  • Accent Purple: #b19cd9 (text highlights)
  • Glow Green: #00ff00 (Matrix mode)
  • Blood Red: #8b0000 (accents)

Icon Design Guidelines

  1. Keep it simple - Icons should be recognizable at 72x72
  2. High contrast - Dark background with bright symbol
  3. Central focus - Main element in center 80% of canvas
  4. Padding - 10% safe area around edges
  5. Consistency - Use same design across all sizes

Inspiration Sources

  • Lovecraft's Cthulhu artwork
  • Eldritch symbols (🜏, ⸸, ☠)
  • Tentacle motifs
  • Ancient tome aesthetics
  • Cosmic horror color schemes

Testing Checklist

  • All 8 icon files created and uploaded
  • Icons display correctly in browser tab (favicon)
  • PWA install prompt appears on mobile
  • Installed app shows correct icon on home screen
  • App icon appears in app switcher
  • Icons look good on both light and dark backgrounds
  • No pixelation on high-DPI screens

Alternative: Update Manifest with Single Icon

If you want a quick fix without creating all sizes:

"icons": [
  {
    "src": "/background.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any maskable"
  }
]

Note: This uses the existing background.png but may not look ideal as an app icon since it's designed as a full background image.

Resources

Tools

  • ImageMagick: CLI image manipulation
  • GIMP: Free Photoshop alternative
  • Canva: Online graphic design tool
  • Figma: Web-based design tool
  • PWA Builder: Microsoft PWA tools

Tutorials

Status: Icons not yet created - required for full PWA functionality Priority: Medium (app works without, but won't install properly) Estimated Time: 30 minutes with automated tools

"The most merciful thing in the world is the inability to correlate all icon sizes." 🜏