From 579f6b9a9692be01a577ccfea59bff10d3d45ee1 Mon Sep 17 00:00:00 2001 From: Gigi Date: Sat, 11 Oct 2025 20:58:56 +0100 Subject: [PATCH] docs: update PWA docs to reflect branded icons are now in place --- PWA_CHECKLIST.md | 8 ++++---- PWA_IMPLEMENTATION.md | 20 ++++++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/PWA_CHECKLIST.md b/PWA_CHECKLIST.md index d49c629b..9e3564f5 100644 --- a/PWA_CHECKLIST.md +++ b/PWA_CHECKLIST.md @@ -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 diff --git a/PWA_IMPLEMENTATION.md b/PWA_IMPLEMENTATION.md index a4be1037..b272047f 100644 --- a/PWA_IMPLEMENTATION.md +++ b/PWA_IMPLEMENTATION.md @@ -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