46 lines
1.6 KiB
Markdown
46 lines
1.6 KiB
Markdown
# PWA Icons Required
|
||
|
||
This directory must contain the following icon files for proper PWA installation on iOS and Android devices:
|
||
|
||
## Required Icon Files
|
||
|
||
### Android Icons
|
||
- **icon-192x192.png** (192×192 pixels)
|
||
- Used for Android home screen and app drawer
|
||
- Should have transparent background or match theme color
|
||
- Include safe zone padding for maskable icons (40px margin)
|
||
|
||
- **icon-512x512.png** (512×512 pixels)
|
||
- Used for Android splash screens and high-resolution displays
|
||
- Should have transparent background or match theme color
|
||
- Include safe zone padding for maskable icons (102px margin)
|
||
|
||
### iOS Icon
|
||
- **apple-touch-icon.png** (180×180 pixels)
|
||
- Used for iOS home screen
|
||
- Should NOT have transparent background (iOS adds its own rounded corners)
|
||
- Fill entire canvas with brand colors/logo
|
||
- iOS automatically applies rounded corners and shadow
|
||
|
||
## Design Guidelines
|
||
|
||
1. **Brand consistency**: Use Stargirlnails logo and brand colors
|
||
2. **Theme color**: Primary pink (#ec4899) matches manifest theme_color
|
||
3. **Contrast**: Ensure icon is visible on various backgrounds
|
||
4. **Simplicity**: Icons should be recognizable at small sizes
|
||
5. **No text**: Avoid small text that becomes unreadable when scaled
|
||
|
||
## Testing
|
||
|
||
After adding icons:
|
||
- Test on Android: Check home screen icon appearance
|
||
- Test on iOS Safari: Add to home screen and verify icon quality
|
||
- Validate with Lighthouse PWA audit
|
||
|
||
## Placeholder
|
||
|
||
Until actual icons are created, you can use a favicon.png (if available) or generate placeholder icons using tools like:
|
||
- https://realfavicongenerator.net/
|
||
- https://www.pwabuilder.com/imageGenerator
|
||
|