Add PWA manifest and apple-touch-icon meta tag

public/icons/README.md

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