# PWA Icon Generator This script generates PWA (Progressive Web App) icon PNG files for the Workout Planner app using only Node.js built-in modules. ## Features - **No external dependencies**: Uses only Node.js built-in modules (`fs`, `zlib`, `path`) - **PNG format with proper compression**: Generates valid PNG files with zlib compression - **Multiple sizes**: Creates icons for all common PWA sizes: - 72x72, 96x96, 128x128, 144x144, 152x152 (small devices) - 192x192, 384x384, 512x512 (larger devices) - **Maskable icons**: Creates adaptive icon variants (192x192 and 512x512) for Android - **SVG favicon**: Generates a bonus SVG favicon for browsers ## Design The icons feature: - **Dark luxury aesthetic**: #0A0A0A (near-black) background - **Stylized "W" letter**: White (#FFFFFF) geometric design representing "Workout" - **Clean, bold design**: Perfect for a gym/fitness application ## Usage ```bash node scripts/generate-icons.js ``` This will generate all icon files in `public/icons/` directory: - `icon-{size}x{size}.png` - Regular icons for various sizes - `icon-{size}x{size}-maskable.png` - Maskable variants for adaptive icons - `favicon.svg` - SVG favicon for browsers ## Integration with PWA The generated icons are automatically referenced in `public/manifest.json`. The manifest includes: - All standard icon sizes for different devices - Maskable icons for Android adaptive icon support - Proper MIME types and purposes ### HTML Integration Add this to your ``: ```html ``` ## Technical Details ### PNG Generation The script uses raw PNG format generation: 1. Creates pixel buffer with RGBA color values 2. Generates PNG header (IHDR chunk) with image dimensions and color info 3. Prepares image data with filter bytes for each row 4. Compresses data using zlib deflate algorithm 5. Generates IDAT chunk with compressed data 6. Calculates CRC32 checksums for data integrity 7. Outputs valid PNG file with proper structure ### Custom Drawing The `drawW()` function: - Fills background with #0A0A0A - Draws a stylized "W" using vertical bars/rectangles - Proportionally scales to any icon size - Uses simple, fast rectangle fill operations ## Regenerating Icons If you modify the design colors or want to regenerate: 1. Edit the color constants in `generate-icons.js`: - `BACKGROUND_COLOR` - Icon background (default: #0A0A0A) - `TEXT_COLOR` - "W" letter color (default: #FFFFFF) 2. Modify the `drawW()` function to change the letter design 3. Run the script again: ```bash node scripts/generate-icons.js ``` All icons will be regenerated with the new design. ## File Sizes The generated PNG files are highly optimized: - Small sizes (72-152px): ~250-1000 bytes - Medium size (192px): ~1.3 KB - Large size (384px): ~4.2 KB - Extra large (512px): ~7.2 KB The compact file sizes are due to zlib compression of the simple color scheme. ## Browser Support These icons work on: - Chrome/Edge PWA installation - Firefox PWA installation - Safari iOS add-to-home-screen - Android adaptive icons (maskable variants) - Desktop browser tabs (favicon)