feat: Add PWA assets and metadata for iOS Safari installation

- Generate app icons in multiple sizes (192x192, 512x512, 180x180, 32x32)
- Create favicon and apple-touch-icon SVG files
- Add comprehensive PWA meta tags in app layout
- Configure theme color (#3B82F6) and background color
- Update manifest.json with icon references (PNG and SVG)
- Create icon generation scripts (SVG and PNG conversion)
- Add browser-based PNG icon generator (HTML)
- Create comprehensive PWA testing guide
- Add icon setup documentation

Requirements: 4.1, 4.2
Task: 13. Add PWA assets and metadata

public/ICONS_README.md

@@ -0,0 +1,114 @@
+# 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