soundwave/docs/LOGO_UPDATE_GUIDE.md

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:

./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

cd frontend
npm run build

Then restart your Docker container:

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