# Changing the logo, site icon and colors

> How to change the logo in the header and footer, the dark mode logo, logo size, the site icon (favicon) and site-wide colors.

*Help Center / Design · Updated: 2026-10-15 · 5 min read*

- **Available to:** Site admins
- **Plans:** All plans

Your site shows the logo in **two places**: the **header** at the top and the **footer** at the bottom. They are set separately. The small icon in the browser tab (favicon) is in the **General** settings.

| What? | Where do I change it? |
| --- | --- |
| Header logo | Design editor → Page Structure → **Header → Main Bar** → site logo block (listed with your site’s name) |
| Footer logo | Design editor → Page Structure → **Footer → Main Body** → **Logo & About** block |
| Site icon (favicon) | **Websites → Manage → General** → site icon |
| Site name and description | **Manage → General → Basic information** |
| Site-wide colors and font | **General Settings** in the design editor’s top bar |

## Changing the header logo

1. Open the design editor with **Websites → Manage → Design → Edit Design**.
2. In **Page Structure** on the left, find **Main Bar** under **Header**. The first row is the site logo block (shown with your site’s name and “Left”). Click it, or click the logo in the preview.
3. The **Site Logo & Title (Header)** settings open on the right. Choose the **Display mode**: **Image + Text**, **Image only** or **Text only**. To use a logo image, choose **Image only**.
4. Under **Logo images**, click **Upload** next to **Logo (light mode)** and pick your logo from your computer, or choose an image you uploaded before from **Library**.
5. Optionally upload a second logo for **Logo (dark mode, optional)** (e.g. a white logo). It’s shown while the site is in the dark theme.
6. Check the logo in the preview, then click **Save Draft** and **Publish** at the top.

> **Tip:** If your header is dark or colored (e.g. red), use a **white/light logo**; on a light header use a dark logo. The logo background should be transparent (transparent PNG or SVG).

### Logo size and fit

- **Width** (e.g. 220px) and **Height** (e.g. 48px): The size the logo is shown at.
- **Max width** (e.g. 280px) and **Max height** (e.g. 60px): The logo never exceeds these.
- **Image fit**: **contain** (fit keeping the ratio, recommended), **cover** (fill by cropping), **fill** (stretch to fill) or **none** (original size).

### Text logo (no image)

In **Image + Text** or **Text only** mode, write the **Title / Site name** and **Slogan / Subtitle** under **Text & Typography** and choose the **Font size** (Small, Normal, Large).

### Other logo settings

- **Alignment within layer:** Shows the logo on the left, center or right of the layer.
- **Move to another layer:** Moves the logo, e.g. from the Main Bar to the Nav Bar.
- **Link & Target:** Where clicking the logo goes (default “/” home page) and same/new tab.
- **SEO & Semantic HTML:** Marking the logo as the page’s <h1>, the HTML tag, **Image alt text** and **Title tooltip text**. Use your site’s name as the alt text.

## Changing the footer logo

1. In the design editor, scroll the left panel down and open **Footer**.
2. Click the first block under **Main Body (Logo, Menus & Contact)** (shown with your site’s name, “Column 1”), or click the logo in the footer preview.
3. The **Logo & About** settings open on the right. Under **Logo & intro settings**, use **Upload** or **Library** for **Logo (light mode)** and **Logo (dark mode, optional)**.
4. In the same section you can edit the intro text under the logo.
5. Save with **Save Draft** and **Publish**.

> **Tip:** The footer usually has a dark background, so a white logo works best there.

## Site icon (favicon)

The small icon shown in browser tabs, bookmarks and on phone home screens. Change it in the site icon field on **Websites → Manage → General** with **Change from library** or **Upload from device**. It should be square and at least **512×512 pixels**. See [general site settings](https://ulakom.com/md/en/help/sites/site-settings.md).

## Site-wide colors and font

Click **General Settings** in the design editor’s top bar. The **GENERAL SETTINGS** panel opens on the left; these settings affect all pages:

- **Colors:** Your site’s main colors (links, highlights, badges).
- **Typography:** The font used on the site (e.g. Inter).
- **Appearance:** The overall style of cards and blocks (e.g. Card).
- **Restore default settings:** Resets the general settings.

Changes are previewed live; save with **Save Draft** and **Publish** to apply them to all pages. The colors of header layers (e.g. a red Main Bar) and individual blocks are changed in their own settings. See [editing the header](https://ulakom.com/md/en/help/design/header-editor.md).

> **Tip:** With the Pro plan you can remove the “News software: Ulakom” link in your site’s footer. See [plans](https://ulakom.com/md/en/help/account/plans-billing.md).

## Related articles

- [Editing the header: layers and blocks](https://ulakom.com/md/en/help/design/header-editor.md)
- [Editing the footer](https://ulakom.com/md/en/help/design/footer-editor.md)
- [Getting started with the design editor](https://ulakom.com/md/en/help/design/design-editor.md)
- [General site settings](https://ulakom.com/md/en/help/sites/site-settings.md)

---

Source page: https://ulakom.com/en/help/design/branding