> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/header/header/logo.md).

# Logo

Replace the store title with a custom logo image. We recommend a logo image with a transparent background and a minimum width of 50px in PNG format.

{% hint style="info" %} <mark style="color:blue;">**Tip**</mark> Looking to design your own logo? Give [Shopify's Hatchful logo creator](https://hatchful.shopify.com/) a try.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Header** section to open the section settings.
2. Under **Logo**, click **Select image** and use the file selector to select or upload your logo file.

   > We recommend using a logo with a transparent background (PNG format).
   >
   > To add a logo to the mobile menu, click the [Mobile menu](/cornerstone/header/mobile-menu.md) section in the side panel to find the logo settings.
3. Use the **Logo width** slider to make your logo larger or smaller on either desktop or mobile.

   > We recommend using the original pixel width of your uploaded image.
4. Click **Save**.

</details>

`Click Header section to find settings`

<table><thead><tr><th width="172">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Logo image</mark></td><td>Upload a PNG image to display as your store logo in the header.<br><br>The name of your store displays when no logo image is uploaded.</td></tr><tr><td><mark style="color:blue;">Logo width</mark></td><td>Increase or decrease the width of your logo image measured in pixels.<br><br>The logo height will change to match the width.</td></tr></tbody></table>

\\

***

> **Related links**
>
> [Header](/cornerstone/header/header.md)\
> [Layout and style](/cornerstone/header/header/layout.md)\
> [Mega navigation](/cornerstone/header/header/mega-navigation.md)\
> [Transparent header](/cornerstone/header/header/transparent-header.md)\
> [Mobile menu](/cornerstone/header/mobile-menu.md)\
> [Search bar](/cornerstone/header/search-bar.md)