Paul Bailey
6cb9a593d4
- 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
115 lines
3.3 KiB
Markdown
115 lines
3.3 KiB
Markdown
# 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
|