> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-settings/logo-and-favicon.md).

# Logo and favicon

Upload your logo, a transparent (light) logo variant, and a favicon.

![Logo and favicon setting panel](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-14df30dfce2d1b88b001ca87ed5439c07b3d47d7%2Ftheme-settings-logo-favicon-panel.png?alt=media)

***

## Logo

Your primary logo, shown in the header on every page.

![Logo displayed in the header — standard background vs transparent overlay mode](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-62eb005560e894317fbc546afc19528f18396434%2Ftheme-settings-logo-header-comparison.png?alt=media)

* Use a **PNG or SVG** with a transparent background so it looks clean on any color scheme.
* Upload at **2× the display size** for sharpness on high-density screens (e.g. 320px for a 160px logo).
* Set the display width in [Header settings](/helix/header-group/header.md).

***

## Transparent Logo

A light-colored version of your logo, shown where a dark logo would be hard to read — over dark headers, menus, or footers. Upload a **white or light PNG/SVG** with a transparent background.

![Transparent logo switching — standard header vs transparent overlay mode](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-a93301b3e757e7bec1638f2b6652c9eccf2e6bbd%2Ftheme-settings-logo-transparent-comparison.png?alt=media)

### Where it's used

* **Transparent header overlay** *(automatic)* — When a page's first section uses the [transparent header](/helix/header-group/header/transparent-header.md), Helix shows the transparent logo, then restores the primary logo once the sticky header appears.
* **Mobile menu drawer** *(manual)* — Set the mobile menu's **Logo style** to **Transparent**.
* **Footer** *(manual)* — Set the footer Logo block's **Logo style** to **Transparent**.
* **Password page** *(manual)* — Set the password page header's **Logo type** to **Transparent**.

{% hint style="info" %}
If the Transparent Logo is left empty, Helix falls back to your primary logo in every context — nothing breaks if you skip it.
{% endhint %}

***

## Favicon

The small icon shown in the browser tab and bookmarks.

![Favicon displayed in browser tab and bookmarks](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-805d5c73d4331c130059b8bf9550744f9c3ba8be%2Ftheme-settings-favicon-browser-tab.png?alt=media)

{% hint style="info" %}
**File requirements:** Use a square image of at least **32×32px** in **.png** or **.ico** format. Avoid transparent backgrounds — they can render as black in some browsers. After saving, a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) may be needed before the new favicon appears.
{% endhint %}