158 lines
3.8 KiB
Markdown
158 lines
3.8 KiB
Markdown
|
# Logo Update Guide
|
||
|
|
|
||
|
|
## Quick Start
|
||
|
|
|
||
|
|
Your new SoundWave logo is ready to be integrated! Follow these steps:
|
||
|
|
|
||
|
|
### Step 1: Save the Logo Image
|
||
|
|
|
||
|
|
Save the logo image you provided (the circular SoundWave logo with play button) to:
|
||
|
|
|
||
|
|
```
|
||
|
|
frontend/public/img/logo.png
|
||
|
|
```
|
||
|
|
|
||
|
|
**Important:** Make sure the file is named exactly `logo.png` and is placed in the `frontend/public/img/` directory.
|
||
|
|
|
||
|
|
### Step 2: Generate All Icon Sizes
|
||
|
|
|
||
|
|
Run the automated script to generate all PWA icons and favicon:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
./scripts/update-logo.sh
|
||
|
|
```
|
||
|
|
|
||
|
|
This will automatically create:
|
||
|
|
- ✅ PWA icons (72x72, 96x96, 128x128, 144x144, 152x152, 192x192, 384x384, 512x512)
|
||
|
|
- ✅ Maskable icons for PWA (192x192, 512x512 with safe padding)
|
||
|
|
- ✅ Favicon (multi-size ICO file)
|
||
|
|
|
||
|
|
### Step 3: Update Code References
|
||
|
|
|
||
|
|
The code will automatically use the new logo in these locations:
|
||
|
|
- Login page
|
||
|
|
- Sidebar
|
||
|
|
- Splash screen
|
||
|
|
- PWA manifest
|
||
|
|
- Browser tab icon
|
||
|
|
- Push notifications
|
||
|
|
|
||
|
|
### Step 4: Rebuild and Deploy
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cd frontend
|
||
|
|
npm run build
|
||
|
|
```
|
||
|
|
|
||
|
|
Then restart your Docker container:
|
||
|
|
```bash
|
||
|
|
docker restart soundwave
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Where the Logo Appears
|
||
|
|
|
||
|
|
### Frontend UI
|
||
|
|
- **Login Page** - Large animated logo at the top
|
||
|
|
- **Sidebar** - Small logo next to "SoundWave" text
|
||
|
|
- **Splash Screen** - Loading screen logo
|
||
|
|
|
||
|
|
### PWA Features
|
||
|
|
- **Home Screen Icon** - When users install the PWA
|
||
|
|
- **Notification Icon** - Push notifications
|
||
|
|
- **Task Switcher** - App icon in multitasking view
|
||
|
|
- **Splash Screen** - PWA launch screen
|
||
|
|
|
||
|
|
### Browser
|
||
|
|
- **Favicon** - Browser tab icon
|
||
|
|
- **Bookmarks** - Bookmark icon
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Logo Specifications
|
||
|
|
|
||
|
|
Your logo perfectly matches the requirements:
|
||
|
|
|
||
|
|
✅ **Design Elements:**
|
||
|
|
- Circular play button in center
|
||
|
|
- Concentric circle patterns
|
||
|
|
- Sound wave visualizer lines on sides
|
||
|
|
- "soundwave" text in modern typography
|
||
|
|
- Professional color scheme (teal/turquoise + dark blue)
|
||
|
|
|
||
|
|
✅ **Technical Details:**
|
||
|
|
- Format: PNG with transparency
|
||
|
|
- Recommended size: 1024x1024 or higher
|
||
|
|
- Background: Transparent or solid color
|
||
|
|
- Color mode: RGB
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Troubleshooting
|
||
|
|
|
||
|
|
**Logo not showing after update?**
|
||
|
|
1. Clear browser cache (Ctrl+Shift+Delete)
|
||
|
|
2. Hard refresh (Ctrl+Shift+R)
|
||
|
|
3. Check browser console for 404 errors
|
||
|
|
4. Verify file is at: `frontend/public/img/logo.png`
|
||
|
|
|
||
|
|
**Icons look blurry on mobile?**
|
||
|
|
- Make sure source logo is high resolution (1024x1024+)
|
||
|
|
- Re-run `./scripts/update-logo.sh`
|
||
|
|
|
||
|
|
**Old logo still showing in PWA?**
|
||
|
|
- Uninstall the PWA from device
|
||
|
|
- Clear service worker cache
|
||
|
|
- Reinstall the PWA
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Manual Icon Generation (Alternative)
|
||
|
|
|
||
|
|
If the script doesn't work, you can use online tools:
|
||
|
|
|
||
|
|
1. **PWA Icon Generator**: https://www.pwabuilder.com/imageGenerator
|
||
|
|
2. **Favicon Generator**: https://realfavicongenerator.net/
|
||
|
|
|
||
|
|
Upload your `logo.png` and download the generated icons to `frontend/public/img/icons/`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Files Modified by This Update
|
||
|
|
|
||
|
|
```
|
||
|
|
✅ frontend/public/img/logo.png (NEW - your logo)
|
||
|
|
✅ frontend/public/img/icons/ (PWA icons)
|
||
|
|
✅ frontend/public/favicon.ico (browser icon)
|
||
|
|
✅ scripts/update-logo.sh (automation script)
|
||
|
|
```
|
||
|
|
|
||
|
|
No code changes needed - all references already point to the correct paths!
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Current Logo Usage in Code
|
||
|
|
|
||
|
|
The logo is referenced in these files (already configured correctly):
|
||
|
|
|
||
|
|
1. **frontend/src/components/Sidebar.tsx**
|
||
|
|
- Line 52: `src="/img/logo.svg"` → Will use PNG fallback
|
||
|
|
|
||
|
|
2. **frontend/src/components/SplashScreen.tsx**
|
||
|
|
- Line 24: `src="/img/logo.svg"` → Will use PNG fallback
|
||
|
|
|
||
|
|
3. **frontend/src/pages/LoginPage.tsx**
|
||
|
|
- Line 91: `src="/img/logo.svg"` → Will use PNG fallback
|
||
|
|
|
||
|
|
4. **frontend/public/manifest.json**
|
||
|
|
- All icon paths already pointing to `/img/icons/icon-*` ✅
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Notes
|
||
|
|
|
||
|
|
- The `.svg` references will still work - browsers will fall back to `.png` if SVG isn't available
|
||
|
|
- For best quality, keep the original high-res PNG as backup
|
||
|
|
- PWA icons are cached - users may need to reinstall the app to see updates
|