Icon & App Icon Specs
Required sizes and formats for favicons, app icons, and platform avatars.
Source Files
All icons are derived from 9 source SVGs in assets/logos/.
| File | Type | Best For |
|---|---|---|
 TSHUB Icon Black.svg | Square icon | Light backgrounds, Android, iOS |
 TSHUB Icon White.svg | Square icon | Dark backgrounds |
 TSHUB Icon Red.svg | Square icon | Brand-colored backgrounds |
 Favicon Black.svg | Circular icon | Favicons, social avatars (light bg) |
 Favicon White.svg | Circular icon | Favicons, social avatars (dark bg) |
 TSHUB Black.svg | Wordmark | Primary logo — light backgrounds |
 TSHUB White.svg | Wordmark | Primary logo — dark backgrounds |
Platform Size Requirements
| Platform | Context | Size (px) | Source File |
|---|---|---|---|
| Web | Favicon (browser tab) | 16×16, 32×32, 48×48 | Favicon Black.svg → .ico |
| Web | Apple Touch Icon | 180×180 | Favicon Black.svg |
| Web | Open Graph / Social Share | 1200×630 | TSHUB Black.svg + background |
| Web | PWA Manifest | 192×192, 512×512 | TSHUB Icon Black.svg |
| Web | Microsoft Tile | 150×150, 310×310 | Favicon Black.svg |
| iOS | App Icon | 1024×1024 (source) 180×180, 152×152, 120×120, 76×76 | TSHUB Icon Black.svg |
| Android | Adaptive Icon | 108×108 (foreground) 1024×1024 (source) | TSHUB Icon Black.svg |
| macOS | App Icon | 512×512, 256×256, 128×128 | TSHUB Icon Black.svg |
| Windows | Taskbar / Start | 64×64, 48×48, 32×32 | Favicon Black.svg |
| Profile / Company | 300×300 (min), 400×400 (ideal) | Favicon Black/White.svg | |
| Profile | 320×320 (min), 400×400 (ideal) | Favicon Black/White.svg | |
| X / Twitter | Profile | 400×400 (ideal) | Favicon Black/White.svg |
| YouTube | Channel Avatar | 800×800 | Favicon Black/White.svg |
| Slack | Workspace Icon | 512×512 | TSHUB Icon Red.svg |
Generation Guide
Favicon .ico: Convert Favicon Black.svg to multi-size .ico containing 16×16, 32×32, and 48×48. Use tools like real-favicon-generator or iconifier.net.
Apple Touch Icon: Export Favicon Black.svg at 180×180 PNG. Reference in <link rel="apple-touch-icon">.
OG Image: Create a 1200×630 PNG with dark background, TSHUB Black.svg centered, and tagline below. Use for social link previews.
PWA / App Icons: Export TSHUB Icon Black.svg at required sizes as PNG. Include in manifest.json.
Email signatures: Host SVGs on your server (e.g., totalsportshub.io/assets/logos/) and reference the URL directly — SVGs render reliably in modern email clients.