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

# Logo

Displays your store logo, with size, spacing, and an alternate version for dark backgrounds.

You upload the actual logo image in [Theme settings > Logo and favicon](/arctos-theme/theme-settings/logo-and-favicon.md). Here, you control how it displays: its size, spacing, and whether it links back to your homepage.

### 1. What you can do

With the Logo block, you can:

* Display your store logo using the image set in [Theme settings > Logo and favicon](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/pages/d59ab9af7f4cfa96c4ee6f92fd50b6b6525687bf#id-1.-logo)
* Show an inverse (alternate) version of your logo, useful when the block sits on a dark or colored background
* Link the logo to your store's homepage
* Control logo sizing by pixel height or container width percentage, independently for desktop and mobile

### 2. How to add a Logo block

You can add a Logo block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want to add a logo, such as your header, footer, or any custom section.
{% endstep %}

{% step %}
**Add a logo block**

Click **Add block**.
{% endstep %}

{% step %}
**Select Logo**

Select **Logo** from the block list.
{% endstep %}

{% step %}
**Configure your logo**

Click **Edit logo in theme settings** to upload or change your logo image, if you haven't already.
{% endstep %}

{% step %}
**Adjust the settings**

Control how it displays using the settings described below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

These settings let you control how your logo behaves and appears, separately from the logo image itself.

<details>

<summary>General</summary>

<table><thead><tr><th width="108.375">Setting</th><th width="100.203125">Options</th><th width="474.33984375">When to use</th></tr></thead><tbody><tr><td><strong>Use inverse logo</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the Inverse logo uploaded in <a href="/arctos-theme/theme-settings/logo-and-favicon.md">Theme settings > Logo and favicon</a>. If no image logo is uploaded, the text logo uses Inverse color. This lets you set a separate text logo color for dark or colored backgrounds.</td></tr><tr><td><strong>Inverse color</strong></td><td>Color picker</td><td>Choose the color used for the generated text logo when <strong>Use inverse logo</strong> is turned on. Use a high-contrast color, such as white on a dark header or footer, so the store name stays easy to read.</td></tr><tr><td><strong>Link to homepage</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn it on so customers can click the logo from anywhere on your site to return to your homepage.</td></tr></tbody></table>

</details>

<details>

<summary>Size</summary>

These settings control how large the logo displays.

<table><thead><tr><th width="110.05859375">Setting</th><th width="130.01953125">Options</th><th width="441.84765625">When to use</th></tr></thead><tbody><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixel</li></ul></td><td><ul><li>Choose <strong>Percent</strong> to scale the logo by container width.</li><li>Choose <strong>Pixel</strong> to set an exact, fixed height in pixels.</li></ul></td></tr><tr><td><strong>Height</strong></td><td>16px–320px</td><td>Sets the logo height in pixels. <em>Only available when <strong>Unit</strong> is set to <strong>Pixel</strong>.</em></td></tr><tr><td><strong>Width</strong></td><td>10%–100%</td><td>Sets the logo width as a percentage of the container. <em>Only available when <strong>Unit</strong> is set to <strong>Percent</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Sets separate unit and height or width values for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="102.04296875">Setting</th><th width="109.984375">Options</th><th width="470.86328125">When to use</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables custom margin spacing around the Logo block, with individual top, bottom, left, and right pixel controls.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate margin values for mobile screens. <em>Only available when <strong>Margin</strong> is On.</em></td></tr></tbody></table>

</details>