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

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

<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png">
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">

<!-- Theme color -->
<meta name="theme-color" content="#FFFFFF">
<meta name="background-color" content="#0A0A0A">

Technical Details

PNG Generation

The script uses raw PNG format generation:

Creates pixel buffer with RGBA color values
Generates PNG header (IHDR chunk) with image dimensions and color info
Prepares image data with filter bytes for each row
Compresses data using zlib deflate algorithm
Generates IDAT chunk with compressed data
Calculates CRC32 checksums for data integrity
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:

Edit the color constants in generate-icons.js:
- BACKGROUND_COLOR - Icon background (default: #0A0A0A)
- TEXT_COLOR - "W" letter color (default: #FFFFFF)
Modify the drawW() function to change the letter design
Run the script again:
```
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)

3.4 KiB Raw Blame History