> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Logo

> Your logo image, a version for dark mode, the logo width, and the text logo with its square mark.

**Where:** in the theme editor, open **Theme settings** (the gear icon at the top of the left sidebar) and choose **Logo**.

![Theme settings, Logo, in the theme editor](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/settings-logo.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=ba242efa5fb4458c11ff1afc0ac93f7e)

1 Theme settings (the gear icon) · 2 Logo, opened in the sidebar

![The text logo with its square mark in the header](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/header.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=9b67b8461df83bf7783ed20cde26620a)

The text logo with its square mark

## How it works

* With a Logo image, the header and password page show it at Logo width (60 to 260 px, default 150), and the footer at 80 percent of that. It is never taller than 56 px.
* Logo for dark mode replaces it while the store is in dark mode. It is used only when Logo is set too. The password page's dark top bar also uses it.
* Without a logo image, the text logo shows Text logo, or your store name when Text logo is empty, in the heading font in capitals.
* Show the square mark beside the text logo adds a small square in the accent color holding Mark letter. Mark letter is empty on install, and while it is empty the square holds the first letter of the text logo. It shows only with the text logo.
* The logo links to the home page and is never a heading.

## Edit it

* Upload a logo with a transparent background, about twice as wide as Logo width so it stays sharp on high-resolution screens.
* If your logo is dark, add a light version as Logo for dark mode: the header and footer turn near-black in dark mode.
* Leave Mark letter empty to use the first letter of the text logo, type one or two other characters, or untick the square mark.

## Settings

| Setting | What it does |
| - | - |
| **Logo** | Image: upload one or choose from Content → Files. Twice the logo width recommended, such as 300 x 80px, on a transparent background. |
| **Logo for dark mode** | Image: upload one or choose from Content → Files. Optional. Shown when the page is in dark mode. |
| **Logo width** | Slider from 60 to 260 px, in steps of 5. Default: 150 px. |
| **Text logo** | Text. Shown when no logo image is set. Leave empty to use the store name. |
| **Show the square mark beside the text logo** | On or off. Default: on. |
| **Mark letter** | Text. One or two characters inside the square mark. Leave empty to use the first letter of the text logo. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.