soundwave/docs/LOGO_UPDATE_INSTRUCTIONS.md

🎨 Logo Update - Complete Instructions

✅ What's Been Done

All code references have been updated to use your new logo:

Updated Files:

• ✅ frontend/src/components/Sidebar.tsx - Logo next to "SoundWave" text
• ✅ frontend/src/components/SplashScreen.tsx - Loading screen logo
• ✅ frontend/src/pages/LoginPage.tsx - Main login page animated logo

All now reference: /img/logo.png

---

📥 Step 1: Save Your Logo

Save the circular SoundWave logo image you provided to:

frontend/public/img/logo.png

How to do this:

1. Download/save the image I showed you (with the play button, circles, and "soundwave" text)
2. Name it exactly: logo.png
3. Place it in: frontend/public/img/ folder

---

🤖 Step 2: Generate PWA Icons (Automatic)

Run this command from the project root:

./scripts/update-logo.sh

This will automatically create:

• ✅ 8 PWA icon sizes (72px to 512px)
• ✅ 2 maskable icons for Android
• ✅ Multi-size favicon.ico

Prerequisites: Make sure ImageMagick is installed (it's already available on your system ✅)

---

🏗️ Step 3: Rebuild Frontend

cd frontend
npm run build

---

🐳 Step 4: Restart Application

docker restart soundwave

---

🎯 Where Your New Logo Will Appear

Login & Authentication

• ✅ Login page (large animated logo)
• ✅ 2FA verification page
• ✅ Password reset pages

Main Application

• ✅ Sidebar (next to "SoundWave" text)
• ✅ Splash/loading screen
• ✅ App header

PWA & Mobile

• ✅ Home screen icon (when installed)
• ✅ App switcher/multitasking view
• ✅ Splash screen on app launch
• ✅ Notification icon

Browser

• ✅ Browser tab favicon
• ✅ Bookmarks
• ✅ Browser history

---

🔍 Verification

After completing all steps:

1. Clear browser cache (Ctrl+Shift+Delete)
2. Hard refresh (Ctrl+Shift+R)
3. Check login page - Should show new circular logo
4. Check sidebar - Should show new logo next to text
5. Check browser tab - Should show new favicon

---

📱 PWA Users

If users already have the PWA installed:

1. They may need to uninstall and reinstall the PWA to see the new icon
2. Or wait for the service worker to update (24-48 hours)

---

⚠️ Troubleshooting

Logo not showing?

• Verify file is at: frontend/public/img/logo.png
• Check filename is exact (case-sensitive)
• Clear browser cache completely
• Check browser console for 404 errors

Icons not generating?

# Check ImageMagick is installed
which convert

# If not installed:
sudo apt-get install imagemagick  # Ubuntu/Debian

Still seeing old logo?

• Check if old logo.svg file exists and delete it
• Do a hard refresh in browser
• Check if build completed successfully

---

📊 Current Status

✅ Code updated (3 files)
✅ Script created (update-logo.sh)
✅ Documentation created
⏳ Waiting for: You to save logo.png
⏳ Waiting for: Running the update script
⏳ Waiting for: Rebuild & restart

---

🎨 Logo Specifications

Your logo perfectly matches these requirements:

Visual Elements:

• ✅ Circular play button in center
• ✅ Concentric circle patterns (sound waves)
• ✅ Sound wave visualization bars on sides
• ✅ "soundwave" text in modern typography
• ✅ Professional color palette (teal/turquoise + navy blue)

Technical:

• ✅ Format: PNG with transparency
• ✅ Recommended size: 1024x1024 or higher
• ✅ Suitable for all screen densities

---

🚀 Quick Commands

# Full update process
cd /home/iulian/projects/zi-tube/soundwave

# 1. Place your logo.png in frontend/public/img/

# 2. Generate icons
./scripts/update-logo.sh

# 3. Rebuild
cd frontend && npm run build && cd ..

# 4. Restart
docker restart soundwave

# 5. Clear cache and refresh browser

---

📞 Need Help?

If you encounter any issues:

1. Check the script output for errors
2. Verify ImageMagick is installed: convert --version
3. Check file permissions on logo.png
4. Look for error messages in terminal

---

That's it! Your new professional logo will be displayed everywhere in the app! 🎉