---
title: How to set your brand logo and colours
description: "Upload your company logo and set theme and accent colours on the Brand page. Changes save automatically and apply to every map and portal page."
seo:
  title: "Set brand logo and colours"
sidebar:
  label: "Set brand logo and colours"
---

Use the `Brand` page to set your company's logo and colours in MangoMap. The settings apply to every map and portal page in the account. You cannot override them for one map.


{/* video-content: id=set-brand-logo-and-colours
Start: The Brand page, fully loaded, with the MangoMap logo in Company Logo,
Theme Colour on Select a theme, and no custom colours.
Show:
1. Open the Theme Colour select and pick Ocean. The page's buttons and
   controls change to the Ocean blue at once.
2. Click the swatch next to Primary Colour. The colour picker opens. Type
   #6d28d9 in its hex box and press Escape. The controls change to violet.
3. Click the swatch next to Feature Highlight Colour, type #06b6d4 in the hex
   box, and press Escape.
End: The Brand page with Theme Colour on Custom, Primary Colour #6d28d9, and
Feature Highlight Colour #06b6d4.
Exclude: Login, loading screens, the logo upload, Remove, and Reset to
Defaults.
*/}
{/* walkthrough: id=set-brand-logo-and-colours */}
<video
  src="/_assets/walkthroughs/set-brand-logo-and-colours.webm"
  controls muted playsInline width="960">
  <track kind="captions" src="/_assets/walkthroughs/set-brand-logo-and-colours.vtt" srclang="en" default />
</video>

{/* /walkthrough */}

## Before you start

- You need to be the account owner. Only the user with the `Owner` role can open the `Brand` page.
- Have your logo file ready. Accepted formats: PNG, JPG, SVG, WebP. Maximum size: 2MB. Minimum dimensions: 100×100px.
- Decide how you want to set colours: pick one of the ten preset themes, or enter a specific hex value for your `Primary Colour`.
1. **Open the Brand page**

    In the admin sidebar, open `Global settings` > `Customisation` > `Brand`.
    <img src="/_assets/customisation/set-brand-logo-and-colours--page.png" alt="Brand Customization page with Brand selected under Customisation, showing Company Logo with Change and Remove, Brand Colours with Theme Colour set to Custom and the Primary Colour swatch, Map Feature Highlight with the Feature Highlight Colour swatch, and Reset to Defaults" width="1600" height="960" />

    Brand page with Company Logo, Brand Colours, and Map Feature Highlight sections

2. **Upload a logo**

    In `Company Logo`, drag your logo file onto the upload area, or click the area to open a file picker.
    <img src="/_assets/customisation/set-brand-logo-and-colours--upload.png" alt="Brand Customization page with no logo. The Company Logo upload area shows Drag & drop or click to upload, with the help text Accepted: PNG, JPG, SVG, WebP (max 2MB, min 100×100px)" width="1600" height="960" />

    Company Logo upload area with no logo

    <img src="/_assets/customisation/set-brand-logo-and-colours--drop.png" alt="Company Logo upload area with a file dragged over it: the area has a coloured border, an upload cloud icon, and the text Drop image here" width="1600" height="960" />

    The upload area while a file is dragged over it

    To replace an existing logo, click `Change` and pick a new file. To clear the logo without replacing it, click `Remove`.

    If your file is the wrong format or size, MangoMap rejects it with one of these messages:

    - `Logo must be at least 100×100px.`
    - `File is too large. Maximum size is 2MB.`
    - `Invalid file type. Please use PNG, JPG, SVG, or WebP format.`
    - `Invalid image file.`

    A portrait-orientation image uploads but shows a warning: `Portrait orientation detected. Square or landscape logos are recommended for best display.` The logo still applies; the warning is advisory.
    <img src="/_assets/customisation/set-brand-logo-and-colours--portrait.png" alt="Company Logo with a tall logo in the preview, Change and Remove beside it, and the warning Portrait orientation detected. Square or landscape logos are recommended for best display." width="1600" height="960" />

    Portrait logo with its warning

    When [`Remove Mango branding`](/docs/customisation/remove-mango-branding) is on, your logo is also the browser tab icon. MangoMap crops it to a centred square, so keep the important part of the logo in the middle.

3. **Pick a theme colour**

    In `Brand Colours`, open the `Theme Colour` select and pick one of the ten preset themes.
    <img src="/_assets/customisation/set-brand-logo-and-colours--themes.png" alt="Brand page with the Theme Colour list open: Select a theme, Custom (selected), then Indigo #635bff, Emerald #16b364, Royal #5265ff, Coral #ff6c47, Teal #15b79f, Ruby #f04438, Ocean #04aad6, Amber #fb9c0c, Forest #087442, and Slate #667085, each with its colour swatch" width="1600" height="960" />

    The Theme Colour select with its ten presets

    Picking a preset sets the `Primary Colour` field automatically to the preset's colour. You can leave it there, or override it in the next step.

4. **Set the primary and highlight colours**

    In `Custom Colours` > `Primary Colour`, type or paste a hex value (for example, `#ff5621`). The `#` is optional: `ff5621` works too. The colour applies across the account immediately.

    In `Map Feature Highlight` > `Feature Highlight Colour`, type or paste a hex value. The colour applies to selected features on every map immediately.

    Pick a preset first if you want a starting point; type a hex if you have a brand colour to match.

    Here is a map with a violet primary colour and a cyan highlight colour, with one country selected:
    <img src="/_assets/customisation/set-brand-logo-and-colours--result.png" alt="World Atlas map with the legend open and Mali selected. Mali has a cyan outline and tint in the feature highlight colour, and its popup is open on the right. The active legend button and the Map portal link are violet in the primary colour" width="1600" height="960" />

    A map with a custom primary colour and a custom highlight colour

5. **Reset everything**

    Click `Reset to Defaults` to clear every brand setting on this page. The logo is removed, no preset is selected, and both colours fall back to the MangoMap default.

## Troubleshooting

**The Brand page is blocked**

You are not the account owner. See [The Customisation menu is blocked](/docs/customisation/troubleshoot-customisation-menu-blocked).

**The logo uploads but looks distorted**

The image's aspect ratio doesn't match the area where MangoMap renders it. Use a square or landscape image; portrait images trigger the warning above and may crop unexpectedly.

**A colour change doesn't appear on a map**

Reload the map.

## Related

- [Customisation menu reference](/docs/customisation/customisation-menu-reference) - the canonical control list.
- [How customisation works in MangoMap](/docs/customisation/concepts-customisation)
- [How to remove Mango branding](/docs/customisation/remove-mango-branding)
- [How to configure the portal](/docs/customisation/configure-the-portal)