soundwave/docs/LOGO_AND_ICONS.md

🎨 SoundWave - Official Logo & PWA Icons

Overview

This document describes the official SoundWave logo and all generated PWA icons for the application.

🎯 Logo Design

Color Palette

• Primary Blue: #0F4C75 (Dark blue - main brand color)
• Accent Cyan: #00C8C8 (Bright cyan - highlights and energy)
• Background: #A8D5D8 (Light turquoise - calming backdrop)

Design Elements

1. Play Button Icon: Central triangular play symbol representing audio playback
2. Sound Waves: Circular waves emanating from the center, suggesting audio propagation
3. Equalizer Bars: Side decorative bars representing audio visualization
4. Typography: Modern sans-serif "soundwave" wordmark with split coloring

Visual Concept

The logo combines musical elements (play button, sound waves, equalizer) into a cohesive design that represents:

• ✨ Audio streaming and playback
• 🎵 Music and sound waves
• 📱 Modern PWA technology
• 🚀 Dynamic and energetic brand

📱 Generated Icons

Standard Icons (Any Purpose)

All standard icons are optimized for general use across all platforms.

Size	Filename	Use Case	File Size
72×72	icon-72x72.png	Small displays, older devices	7.4 KB
96×96	icon-96x96.png	Medium displays	12 KB
128×128	icon-128x128.png	Desktop taskbar	18 KB
144×144	icon-144x144.png	Windows tiles	22 KB
152×152	icon-152x152.png	iPad, older iOS	24 KB
192×192	icon-192x192.png	Android home screen	33 KB
384×384	icon-384x384.png	High-DPI displays	82 KB
512×512	icon-512x512.png	Splash screens, app stores	112 KB

Maskable Icons (Android Adaptive)

Maskable icons have safe zone padding to work with Android's adaptive icon system.

Size	Filename	Purpose	File Size
192×192	icon-192x192-maskable.png	Android adaptive icon	33 KB
512×512	icon-512x512-maskable.png	Android HD adaptive icon	112 KB

What are maskable icons?

• Android can crop icons into different shapes (circle, square, rounded square, etc.)
• Maskable icons ensure important content stays visible regardless of mask shape
• Uses safe zone: 80% of icon area guaranteed to be visible

Platform-Specific Icons

Apple Touch Icon (iOS/Safari)

Size	Filename	Use Case	File Size
180×180	apple-touch-icon.png	iOS home screen, Safari	30 KB

iOS Notes:

• Automatically rounded by iOS
• Displayed on home screen when "Add to Home Screen" is used
• No transparency (fills with white if present)

Favicon (Browsers)

Format	Filename	Sizes	Use Case	File Size
ICO	favicon.ico	16×16, 32×32, 48×48	Browser tabs, bookmarks	15 KB

📂 File Structure

frontend/public/
├── img/
│   ├── favicon.ico (multi-size ICO file)
│   └── icons/
│       ├── logo-source.svg (original vector logo)
│       ├── icon-72x72.png
│       ├── icon-96x96.png
│       ├── icon-128x128.png
│       ├── icon-144x144.png
│       ├── icon-152x152.png
│       ├── icon-192x192.png
│       ├── icon-192x192-maskable.png
│       ├── icon-384x384.png
│       ├── icon-512x512.png
│       ├── icon-512x512-maskable.png
│       └── apple-touch-icon.png
├── manifest.json (references all icons)
├── index.html (includes favicon and apple icon links)
└── icon-preview.html (preview all icons)

🔧 Configuration Files

manifest.json

All icons are properly referenced in the PWA manifest:

{
  "icons": [
    {
      "src": "/img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any"
    },
    // ... all 8 standard sizes
    {
      "src": "/img/icons/icon-192x192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/img/icons/icon-512x512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

index.html

Favicon and Apple icons are linked in the HTML head:

<!-- Icons -->
<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/icon-72x72.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/img/icons/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png" />
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png" />

🎨 Preview

To view all generated icons visually:

1. Start the dev server: npm run dev
2. Navigate to: http://localhost:5173/icon-preview.html
3. See all icons displayed with their sizes and purposes

📊 Statistics

• Total Icons: 11 PNG files + 1 ICO file
• Total Size: ~508 KB
• Format: PNG (RGB, 8-bit)
• Compression: Optimized
• Color Profile: sRGB

🌐 Platform Support

✅ Full Support

• Chrome: All icons work perfectly
• Edge: All icons work perfectly
• Android Chrome: Standard + maskable icons
• Safari: Standard + Apple touch icon
• iOS Safari: Apple touch icon + home screen

⚠️ Partial Support

• Firefox: Standard icons (no maskable support)
• Opera: Standard icons work

📱 Where Icons Appear

Desktop

• Browser tab favicon (16×16, 32×32)
• Taskbar (128×128)
• Installation prompt (192×192)
• Start menu/dock after install (192×192, 512×512)
• Windows tiles (144×144)

Android

• Home screen shortcut (192×192 or maskable)
• App drawer (192×192 or maskable)
• Recent apps (192×192)
• Splash screen (512×512)
• Notification icon (192×192)

iOS

• Home screen icon (180×180 apple-touch-icon)
• Splash screen (512×512)
• Safari bookmark (apple-touch-icon)

🔄 Regenerating Icons

If you need to regenerate icons from a new source image:

Method 1: Use Existing Script

cd frontend/public/img/icons
# Replace logo-source.svg with your new design
./../../../../scripts/generate-pwa-icons.sh

Method 2: Manual Generation

cd frontend/public/img/icons

# Generate standard sizes
for size in 72 96 128 144 152 192 384 512; do
  convert logo-source.svg -resize ${size}x${size} icon-${size}x${size}.png
done

# Generate maskable icons
for size in 192 512; do
  convert logo-source.svg -resize ${size}x${size} -gravity center -extent ${size}x${size} \
    icon-${size}x${size}-maskable.png
done

# Generate Apple touch icon
convert logo-source.svg -resize 180x180 apple-touch-icon.png

# Generate favicon
convert logo-source.svg -define icon:auto-resize=16,32,48 ../favicon.ico

Method 3: Online Tools

Use PWA Builder Image Generator:

1. Upload source image (512×512 minimum)
2. Download generated icon pack
3. Replace files in frontend/public/img/icons/

🎯 Best Practices

Source Image Requirements

• Format: PNG or SVG (vector preferred)
• Minimum Size: 512×512 pixels
• Aspect Ratio: 1:1 (square)
• Background: Include background color (don't rely on transparency)
• Safe Zone: Keep important content in center 80% for maskable icons

Icon Design Guidelines

✅ Do:

• Use simple, recognizable shapes
• Maintain good contrast
• Test at small sizes (16×16)
• Include brand colors
• Use vector source when possible

❌ Don't:

• Use thin lines (< 2px)
• Include small text
• Rely on fine details
• Use complex gradients
• Leave transparent backgrounds

🚀 Testing Icons

Browser Testing

# Build and preview
npm run build
npm run preview

# Test in browsers:
# - Chrome DevTools > Application > Manifest
# - Check all icon sizes load
# - Verify no 404 errors

Lighthouse Audit

1. Open Chrome DevTools
2. Lighthouse tab
3. Progressive Web App
4. Check "Provides a valid apple-touch-icon"
5. Check "Has a <meta name="theme-color"> tag"
6. Check "Manifest includes a maskable icon"

Device Testing

Android:

1. Install PWA via "Add to Home Screen"
2. Check icon appearance in:
   • Home screen
   • App drawer
   • Recent apps
   • Notifications

iOS:

1. Safari > Share > "Add to Home Screen"
2. Check icon on home screen
3. Verify rounded corners applied correctly

Desktop:

1. Chrome > Install app (⊕ icon in address bar)
2. Check icon in:
   • Taskbar/dock
   • Start menu/launcher
   • Window title bar

📝 Troubleshooting

Icons not showing in browser

• Check file paths in manifest.json
• Verify files exist in public/img/icons/
• Clear browser cache
• Check browser console for 404 errors

Icons blurry on high-DPI displays

• Ensure you have 384×384 and 512×512 sizes
• Use vector source (SVG) for regeneration
• Check PNG compression quality

Maskable icons cropped incorrectly

• Ensure 20% padding around all edges
• Keep logo centered
• Test with Maskable.app

Apple touch icon not working on iOS

• Verify file is 180×180 pixels
• Ensure no transparency
• Check <link rel="apple-touch-icon"> in HTML
• File must be PNG format

📚 Resources

• PWA Builder - Icon generator
• Maskable.app - Test maskable icons
• Web.dev PWA Icons - Icon guidelines
• Apple Human Interface Guidelines - iOS icon specs
• Android Adaptive Icons - Android specs

✅ Checklist

PWA Icon Implementation:

• Source logo created (SVG)
• 8 standard icon sizes generated (72px-512px)
• 2 maskable icons created (192px, 512px)
• Apple touch icon generated (180px)
• Favicon created (multi-size ICO)
• manifest.json updated with all icons
• index.html updated with favicon/apple icon links
• Icon preview page created
• All files verified and tested
• Total size optimized (~508KB)
• Documentation completed

🎉 Summary

Your SoundWave PWA now has a complete, professional icon set that works across all platforms:

• ✅ 11 PNG icons covering all size requirements
• ✅ Maskable icons for Android adaptive icons
• ✅ Apple touch icon for iOS home screen
• ✅ Favicon for browser tabs and bookmarks
• ✅ Optimized file sizes (~508KB total)
• ✅ Properly configured in manifest and HTML
• ✅ Ready for production deployment

The official SoundWave logo is now consistently used across your entire PWA!