ActiveManage Docs
← Back to activemanage.co.uk

Logo

Uploading Your Logo

Your logo appears at the top of every page, on every login screen, in email headers, in printed documents. Uploading it well — at the right sizes, in the right formats — is one of the most visible branding tasks.

Logo upload page with drop zones for Primary (1200×200 PNG), Square (512×512), Favicon (32×32 and 192×192), Email (max-width 300px); preview pane shows logo in different contexts

Sizes You Need

  • Primary logo: Horizontal logo for the page header. Recommended 1200×200 PNG with transparent background.
  • Square logo: 512×512 for places where horizontal doesn't fit — favicons, app icons, social previews.
  • Favicon: 32×32 PNG (or ICO) for browser tabs; 192×192 PNG for PWA install.
  • Email logo: Optimised for HTML emails. Max width 300px; works in dark mode.
  • White / dark variant: Inverted logo for use on dark backgrounds.

Format Choices

  • PNG: Works everywhere; supports transparency. Default choice.
  • SVG: Crisp at any size; tiny file. Use when possible for the primary logo.
  • WebP: Smaller than PNG; supported in most modern email clients but not all.
  • JPG: Only if your logo has no transparency and lots of detail — rare.

Worked Examples

  • SaaS launch: Upload SVG primary logo (works everywhere), PNG favicon, dark variant for use on the marketing footer.
  • Multi-tenant white label: Each tenant uploads their own set of logos; tenant URL serves their branding.
  • Rebrand: Upload the new logo to staging first; review every page where it appears; promote to production once happy.
  • Seasonal logo: Holiday variant uploaded for December only; reverts automatically on schedule.

Logo Variants

One logo isn't enough. Different placements need different treatments — colour vs monochrome, light vs dark, horizontal vs stacked. ActiveManage supports a small set of variants so the right logo automatically appears for each context.

Five logo variants shown side-by-side: Primary (full colour, horizontal), White-on-dark (for dark backgrounds), Square (compact stack for narrow spaces), Monochrome (for monochrome documents), Reversed (dark on white)

Supported Variants

  • Primary: Full colour, on a light background. Default.
  • White on dark: White or inverted logo for dark headers, dark mode, dark hero sections.
  • Square / icon-only: Compact glyph for narrow header bars, mobile, app icons.
  • Monochrome: Single-colour for print, fax, or where colour reproduction is unreliable.
  • Reversed: Dark logo on white when the colour version doesn't have enough contrast.

Where Each Variant Appears

  • Primary: Standard signed-in header on light theme.
  • White on dark: Hero sections, marketing footer, dark-mode header.
  • Square: Mobile compact header, favicon, app icon, social-share thumbnail.
  • Monochrome: Printable PDFs, fax-friendly invoices.
  • Reversed: Email signatures, embedded widgets on third-party dark backgrounds.

Automatic Switching

The platform picks the right variant per context — no manual selection required. CSS media queries select the right asset for light vs dark mode; document templates pick monochrome automatically for non-colour outputs; mobile compact mode uses the square.

Worked Examples

  • SaaS: Primary, white-on-dark, square uploaded. Monochrome and reversed left blank — platform auto-derives.
  • Brand-strict client: All 5 variants uploaded with brand-approved adjustments. Auto-derivation disabled.
  • Multi-tenant: Each tenant uploads at minimum primary + white-on-dark; others derived from those.
Tip: Test with dark mode on. The platform's auto-inversion of a coloured logo can be ugly — uploading an explicit white-on-dark variant fixes it.