docs: update PWA docs to reflect branded icons are now in place

This commit is contained in:
Gigi
2025-10-11 20:58:56 +01:00
parent d9403a73c6
commit 579f6b9a96
2 changed files with 16 additions and 12 deletions

View File

@@ -2,10 +2,10 @@
## Pre-Production
- [ ] **Replace placeholder icons** with branded designs
- Create 192x192px and 512x512px icons
- Create maskable variants with safe area padding
- Use [Maskable.app](https://maskable.app/) to test maskable icons
- [x] **Replace placeholder icons** with branded designs
- 192x192px and 512x512px icons from boris-favicon.zip
- ✅ Maskable variants (currently same as standard - can add padding if desired)
- Optional: Use [Maskable.app](https://maskable.app/) to test and refine maskable icons
- [ ] **Test install flow**
- [ ] Chrome/Edge on desktop

View File

@@ -57,17 +57,21 @@ Boris has been successfully upgraded to a full Progressive Web App (PWA)!
- `src/components/Settings.tsx` - Added PWA settings section
- `package.json` - Added PWA dependencies
## Icon Placeholders
## Icons
⚠️ **IMPORTANT**: Replace placeholder icons with proper branded designs!
**Branded icons now in place!**
Current placeholders are minimal 1x1 pixel images. You need:
- `public/icon-192.png` - 192x192px app icon
- `public/icon-512.png` - 512x512px app icon
- `public/icon-maskable-192.png` - 192x192px with safe area padding
- `public/icon-maskable-512.png` - 512x512px with safe area padding
The following icons have been extracted from `boris-favicon.zip` and are ready:
- `public/icon-192.png` - 192x192px PWA icon (from android-chrome-192x192.png)
- `public/icon-512.png` - 512x512px PWA icon (from android-chrome-512x512.png)
- `public/icon-maskable-192.png` - 192x192px maskable variant
- `public/icon-maskable-512.png` - 512x512px maskable variant
- `public/favicon.ico` - Standard favicon
- `public/favicon-16x16.png` - 16x16 favicon
- `public/favicon-32x32.png` - 32x32 favicon
- `public/apple-touch-icon.png` - iOS home screen icon
**Maskable icons** should have ~20% padding on all sides to ensure they look good on all devices.
**Note**: The maskable icons currently use the same images as standard icons. If you want optimal maskable appearance with safe area padding, consider creating dedicated maskable variants with ~20% padding on all sides.
## Testing PWA Functionality