Header Logo¶
The site logo shown in the header. You set the default logo, an optional light logo for dark heroes, the link it points to, and its accessible label. Best for: placing your brand mark in the header and linking it home.
📷 Hero image
Target file: assets/img/header-logo/hero.webp
A close crop of the left side of the site header showing the brand logo sized to sit comfortably against the header height, with the start of the nav links to its right. Use a transparent logo on a Light header background so the mark reads cleanly. Captured at desktop width.
At a glance¶
Header Branding Configuration
- What it does: shows your logo in the header, links it (usually to the homepage), and lets you supply a separate light logo for pages with a dark hero.
- Best used for: the brand mark at the top of every page, inside the site header.
- Not the right fit if: you want a logo wall or client grid (use Logo Grid or Logo Slider).
- 🔗 Live demo: (add demo link)
This is a configuration module
You set the logo images, link, and label here. Logo sizing and broader header styling (background, spacing, sticky behavior) come from Theme Settings header options, not from this module.
Add it to your page¶
- Open your header template or global header in the HubSpot editor.
- Select the Header Logo module.
- Under Default theme, upload your Default logo, or leave it empty to inherit your account Brand Kit logo.
- If any pages use a dark hero with the light header, upload a Light logo under Light theme.
- Set the Logo link (usually your homepage) and, if needed, adjust the Logo aria-label.
- Save so the logo appears across the site.
Common setups¶
| Goal | Setting |
|---|---|
| Use your Brand Kit logo | Leave Default logo empty (it inherits from Brand Kit) |
| Override the Brand Kit logo | Upload an image into Default logo |
| Light logo over dark heroes | Upload a Light logo; it shows when Page Settings Make header lighter is on |
| Link the logo home | Set Logo link to / (the default) or your homepage |
| Resize the logo | Set it in Theme Settings header options |
Field reference¶
This is a configuration module, so its fields are focused on the logo itself.
Default theme
| Field | Type | What it does | Default |
|---|---|---|---|
| Default logo | logo | The logo for normal pages. Defaults to your account Brand Kit logo (Settings › Brand Kit); upload here to override it. | inherits Brand Kit |
Light theme
| Field | Type | What it does | Default |
|---|---|---|---|
| Light logo | image | Shown on pages where Page Settings › Make header lighter is on (a light logo over a dark hero). If left empty, the default logo is used. | empty (160 × 48) |
Logo link and label
| Field | Type | What it does | Default |
|---|---|---|---|
| Logo link | link | The URL the logo links to, typically the homepage. Supports page, external, file, email, and blog targets. | / |
| Logo aria-label | text | Accessible label for the logo link, read by screen readers. | Home |
Sizing and header style (from Theme Settings)
There is no size field in this module. Logo dimensions and the header bar around it (background, spacing, sticky behavior) are controlled globally in Theme Settings header options.
Tips & gotchas¶
Use a crisp, transparent logo
A transparent PNG or SVG keeps your logo sharp on any header background. Provide a Light logo too so your mark stays visible on dark heroes.
Sizing lives in the theme
If you cannot find a width or height option here, check Theme Settings. This module only handles the logo images, link, and label.
Related modules¶
- Navigation: the main header menu that sits beside the logo.
- Language Switcher: the language picker in the header.
- Header and footer settings: flips the header to light, which is when the Light logo appears.