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
3.3 KiB
3.3 KiB
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)
npm install --save-dev sharp
node scripts/convert-with-sharp.js
Option 2: Using ImageMagick
# 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
- Visit https://cloudconvert.com/svg-to-png
- Upload each SVG file
- Download the PNG versions
- Place them in the
public/directory
Option 4: Design Tool Export
- Open SVG files in Figma, Sketch, or Adobe Illustrator
- Export as PNG at the required sizes
- Save to the
public/directory
Testing PWA Installation
iOS Safari
- Open the app in Safari on iPhone/iPad
- Tap the Share button
- Tap "Add to Home Screen"
- Verify the icon appears correctly
- Open the app from home screen
- Verify it opens in standalone mode (no browser UI)
Android Chrome
- Open the app in Chrome
- Tap the menu (three dots)
- Tap "Add to Home screen" or "Install app"
- Verify the icon and name
- Open the installed app
Desktop Chrome/Edge
- Open the app in Chrome or Edge
- Look for the install icon in the address bar
- Click to install
- 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