Brand Assets
All media assets used across Uverus products. Canonical source of truth for logos, favicons, OG images, and usage instructions.
Missing assets — action required
Two assets are not yet available in any codebase and must be provided: (1) favicon.svg — a vector favicon for modern browser tabs and PWA use; (2) logo-wordmark — the Uverus logo mark alongside the "Uverus" typeset wordmark in SVG/PNG format. Until supplied, use the PNG icon mark as a fallback.
Favicon set
favicon.ico
Multi-resolution ICO file (16×16, 32×32). Used by legacy browsers and Windows taskbar.
/brand/favicon.ico
favicon.png
Standard PNG favicon. Used as the default
/brand/favicon.png
<link rel="icon"> for most modern browsers.
favicon-32×32
32px PNG for high-DPI browser tabs. Add alongside favicon.ico for full compatibility.
/brand/favicon-32x32.png
favicon-192×192
Android homescreen / PWA icon. Referenced in
/brand/favicon-192x192.png
site.webmanifest.
favicon-512×512
PWA splash + app store icon. Referenced in
/brand/favicon-512x512.png
site.webmanifest.not yet available
favicon.svg
Vector favicon for modern browsers and PWA use. Scales cleanly at any size.
Missing — provide SVG
Apple touch icon
apple-touch-icon
180×180 PNG. Used when added to iOS homescreen. Must be referenced in
/brand/apple-touch-icon.png
<head>.Logo mark
logo-icon.png
The Uverus icon mark on white/light background. Use in navbars, footers, and anywhere the brand mark is needed.
/brand/logo-icon.png
logo-icon-trp.png
Icon mark with transparent background. Use on coloured or dark surfaces where white fill would show.
/brand/logo-icon-trp.png
not yet available
logo-wordmark
Icon mark + "Uverus" typeset together in a single lockup. Required for print, marketing, and OG images.
Missing — provide SVG + PNG
Open Graph / SEO
og-image.png
1200×630 Open Graph image for social sharing previews (Twitter/X, LinkedIn, WhatsApp). Each product should have its own variant using this as the base.
/brand/og-image.png
Web App Manifest
site.webmanifest
site.webmanifest
PWA manifest. References 192px and 512px icons. Add per-product with correct name and theme_color.
/brand/site.webmanifest
Brand colours
#FF3333
Brand red
#E62929
Brand red dark
#111110
Ink
#FAFAF7
Bone
#7C796F
Muted
Exception: Uverus Health uses its own green accent (#1DB954 range). All other products use #FF3333 as the primary brand colour.
How to use these assets
| Asset | Where to put it | HTML snippet |
|---|---|---|
| favicon.ico + favicon-32x32.png | Root public/ dir |
<link rel="icon" type="image/x-icon" href="/favicon.ico"> |
| favicon.png | Root public/ |
<link rel="icon" type="image/png" href="/favicon.png"> |
| apple-touch-icon.png | Root public/ |
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
| site.webmanifest | Root public/ |
<link rel="manifest" href="/site.webmanifest"> |
| og-image.png | Root public/ |
<meta property="og:image" content="https://yourdomain.com/og-image.png"> |
| logo-icon.png | public/ or src/assets/ |
<img src="/logo.png" alt="Uverus" style="height:26px;width:auto"> |
Full <head> reference block
<!-- Favicon --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <!-- Open Graph --> <meta property="og:image" content="https://yourdomain.com/og-image.png"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://yourdomain.com/og-image.png"> <!-- Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
File naming convention
| File | Size | Format | Use case |
|---|---|---|---|
| favicon.ico | 16×16 + 32×32 embedded | ICO | Legacy browsers, Windows |
| favicon.png | varies | PNG | Default browser tab icon |
| favicon.svg | scalable | SVG | Modern browsers, dark mode support — missing |
| favicon-32x32.png | 32×32 | PNG | High-DPI browser tab |
| favicon-192x192.png | 192×192 | PNG | Android homescreen / PWA |
| favicon-512x512.png | 512×512 | PNG | PWA splash, app store |
| apple-touch-icon.png | 180×180 | PNG | iOS homescreen |
| logo-icon.png | varies | PNG | In-app navbar / footer |
| logo-icon-trp.png | varies | PNG | Dark backgrounds (transparent) |
| logo-wordmark.svg | scalable | SVG | Marketing, print — missing |
| og-image.png | 1200×630 | PNG | Social sharing preview |