# PWA Icons Guide

## Current Icon Files

### SVG Icons (Generated)
- `icon.svg` - Base icon (512x512)
- `icon-192.svg` - Small icon (192x192)
- `icon-512.svg` - Large icon (512x512)
- `apple-touch-icon.svg` - Apple touch icon (180x180)
- `favicon.svg` - Favicon (32x32)

### PNG Icons (Required for Production)
For optimal PWA support, especially on iOS Safari, you need PNG versions:
- `icon-192.png` - Small icon (192x192)
- `icon-512.png` - Large icon (512x512)
- `apple-touch-icon.png` - Apple touch icon (180x180)
- `favicon-32.png` - Favicon (32x32)
- `favicon.ico` - Multi-size favicon (optional but recommended)

## Generating PNG Icons

### Option 1: Using Sharp (Recommended)
```bash
npm install --save-dev sharp
node scripts/convert-with-sharp.js
```

### Option 2: Using ImageMagick
```bash
# Install ImageMagick first
brew install imagemagick  # macOS
# or
apt-get install imagemagick  # Linux

# Convert icons
convert public/icon-192.svg -resize 192x192 public/icon-192.png
convert public/icon-512.svg -resize 512x512 public/icon-512.png
convert public/apple-touch-icon.svg -resize 180x180 public/apple-touch-icon.png
convert public/favicon.svg -resize 32x32 public/favicon-32.png
```

### Option 3: Online Converter
1. Visit https://cloudconvert.com/svg-to-png
2. Upload each SVG file
3. Download the PNG versions
4. Place them in the `public/` directory

### Option 4: Design Tool Export
1. Open SVG files in Figma, Sketch, or Adobe Illustrator
2. Export as PNG at the required sizes
3. Save to the `public/` directory

## Testing PWA Installation

### iOS Safari
1. Open the app in Safari on iPhone/iPad
2. Tap the Share button
3. Tap "Add to Home Screen"
4. Verify the icon appears correctly
5. Open the app from home screen
6. Verify it opens in standalone mode (no browser UI)

### Android Chrome
1. Open the app in Chrome
2. Tap the menu (three dots)
3. Tap "Add to Home screen" or "Install app"
4. Verify the icon and name
5. Open the installed app

### Desktop Chrome/Edge
1. Open the app in Chrome or Edge
2. Look for the install icon in the address bar
3. Click to install
4. Verify the app opens in a standalone window

## Icon Design Guidelines

### Size Requirements
- **192x192**: Minimum size for PWA icons
- **512x512**: Recommended size for high-DPI displays
- **180x180**: Apple touch icon size
- **32x32**: Favicon size

### Design Tips
- Use simple, recognizable shapes
- Ensure good contrast between icon and background
- Test on both light and dark backgrounds
- Avoid fine details that don't scale well
- Use the brand color (#3B82F6 - blue)

### Safe Area
- Keep important content within 80% of the icon area
- iOS may apply masks to icons
- Android may apply adaptive icon masks

## Troubleshooting

### Icon Not Showing on iOS
- Ensure PNG format is used (iOS doesn't support SVG for touch icons)
- Check file size (should be under 1MB)
- Verify correct file path in manifest.json and layout.tsx
- Clear Safari cache and try again

### Icon Not Updating
- Clear browser cache
- Update the manifest.json version or cache name
- Hard refresh (Cmd+Shift+R or Ctrl+Shift+R)
- Uninstall and reinstall the PWA

### Wrong Icon Displayed
- Check manifest.json icon paths
- Verify icon files exist in public/ directory
- Check browser console for 404 errors
- Ensure correct MIME types in manifest.json