PWA Icon Generation Instructions

The PWA manifest requires 8 icon sizes for full compatibility across devices.

Required Icon Sizes

72x72px
96x96px
128x128px
144x144px
152x152px
192x192px
384x384px
512x512px (maskable)

Design Guidelines

Background: Navy blue (#142a66) Icon/Logo: Orange (#f48b1c) Style: Simple, recognizable design that works at small sizes

Quick Generation Methods

Option 1: Online PWA Icon Generator

Visit: https://www.pwabuilder.com/imageGenerator
Upload a 512x512px source image
Download the generated icon pack
Copy PNG files to this directory

Option 2: ImageMagick (Command Line)

If you have a 512x512px source image called source-icon.png:

# From the icons directory
for size in 72 96 128 144 152 192 384 512; do
  convert source-icon.png -resize ${size}x${size} icon-${size}.png
done

Option 3: Photoshop/GIMP

Create a 512x512px canvas
Add your design (navy background + orange icon)
Save/Export for each required size
Name files as: icon-72.png, icon-96.png, etc.

Temporary Placeholder

For testing, you can use a simple colored square:

# Generate simple colored placeholder icons
for size in 72 96 128 144 152 192 384 512; do
  convert -size ${size}x${size} xc:#142a66 \
    -gravity center \
    -fill '#f48b1c' \
    -pointsize $((size / 2)) \
    -annotate +0+0 'SFM' \
    icon-${size}.png
done

Verification

After generating icons, verify:

All 8 sizes exist in this directory
Files are named exactly: icon-72.png, icon-96.png, etc.
Images have transparent or navy background
Logo/text is clearly visible at smallest size (72px)

Testing PWA Installation

Open SFM in Chrome on Android or Safari on iOS
Look for "Install App" or "Add to Home Screen" prompt
Check that the correct icon appears in the install dialog
After installation, verify icon on home screen

1.9 KiB Raw Blame History