# Logo and Branding

https://docs.wisecp.com/es/logo-and-branding

The Logo/Branding tab holds your brand identity: logos and colors for the website, client area, invoices, and admin panel. Each one comes in a light and a dark version.

## Opening the Screen

Open **Settings** > **Theme/Customization**, then click the **Logo/Branding** tab. It also opens directly at:

`{admin}/settings/theme?group=logo`

## What Is on the Screen

A side rail on the left lists four areas; open one to see its logo slots:

- **Website** — the header logo, footer logo, and browser tab icon. Also holds the Site Colors used across the website, client area, and email templates.
- **Client Area** — the logo shown in the client panel menu and top bar. Left empty, it falls back to the website logo.
- **Invoice** — the logo printed on invoice pages and PDFs. Left empty, it falls back to the website logo.
- **Admin Area** — the admin panel's own logo and Panel Colors, part of the Whitelabel package. Without that package, the entry still shows the upload tiles and the color strip so you can see what the feature covers, but they are switched off and the Save button is hidden. A licence panel above them carries the details and the purchase link.

Each logo has its own tile. A preview of the current image doubles as a drop zone for a new file. A **Library** button lists images you uploaded before, so you can reuse one without a new upload.

Website and Admin Area also show a color strip. Its **Pick from Logo** button reads the dominant colors straight out of your logo image. Panel Colors additionally has a live contrast check and a **Reset to Defaults** button.

## Fields

- **Website · Light Mode**: Header logo. SVG, PNG, JPG, or WebP, up to 2MB.
- **Website · Dark Mode**: Footer logo. Same formats and size limit.
- **Website · Favicon**: Browser tab icon. ICO, PNG, or SVG, up to 1MB.
- **Client Area · Light Mode**: Logo for the client panel's light appearance.
- **Client Area · Dark Mode**: Logo for the client panel's dark appearance.
- **Invoice · Light Mode**: Logo shown on invoice pages and printouts.
- **Invoice · Dark Mode**: Used where the invoice view is dark.
- **Admin Area · Light Mode**: Admin panel logo, light mode. Whitelabel package required.
- **Admin Area · Dark Mode**: Admin panel logo, dark mode. Whitelabel package required.
- **Site Colors — Primary / Secondary**: Brand colors for the website, client area, and email templates.
- **Panel Colors — Primary / Secondary / Text**: Brand colors and body text color for the admin panel. Whitelabel package required.

## Tasks

### Replacing a Logo

Open the area that holds the slot. Drag a new file onto its preview, or click the preview to browse for one. Click **Settings** at the bottom of the tab to save.

### Reusing a Previous Upload

Click a slot's **Library** button and pick an image you uploaded earlier for any slot. You can also remove an image from that same list once you no longer need it.

### Setting Brand Colors

Pick a color directly, or type its hex code next to the swatch. Click **Pick from Logo** to fill both colors from your logo automatically, then save.

## Things to Watch

> **Invoice Logo Needs a Raster Format**
> 
> PDF invoices embed raster images only. Pick PNG or JPG for the invoice logo; if you choose an SVG, the browser converts it to PNG before saving.

> **Library Removal Is Permanent**
> 
> Deleting an image from a slot's Library removes the stored file for good. It comes off every dropdown, not only the one where you deleted it.

> **Client Area and Invoice Can Borrow the Website Logo**
> 
> Leaving either logo empty is not an error. Both fall back to the Website logo automatically. One exception: a PDF invoice cannot use an SVG website logo, so it prints the company name instead. Upload an invoice logo to show a mark on the PDF.

## Required Privileges

- **SETTINGS_THEME_CONFIGURE** — required for every action on this tab, including uploading, picking a color, and using the Library.

## Related Articles

- [Theme Settings Overview](https://docs.wisecp.com/en/theme-settings-overview)
- [Managing Themes](https://docs.wisecp.com/en/managing-themes)
- [Home Page Settings](https://docs.wisecp.com/en/home-page-settings)