# 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

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

### Option 2: ImageMagick (Command Line)

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

```bash
# 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

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

## Temporary Placeholder

For testing, you can use a simple colored square:

```bash
# 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

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