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

# Logo

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Logo** settings allow you to manage your store branding across the entire theme. You can upload separate logos for desktop, transparent headers, and mobile devices, adjust their display widths, and add a favicon for the browser tab.

The logo settings are available under **Theme settings → Logo** in the Shopify Theme Editor.

### How to Open Logo Settings

{% hint style="success" %}
**Steps**

1. Log in to your Shopify Admin.
2. Go to **Online Store → Themes**.
3. Click **Customize** on the Cello theme.
4. Select **Theme Settings**.
5. Click **Logo**.
6. Configure the logo settings according to your store design.
7. Click **Save** after making your changes.
   {% endhint %}

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Logo image</td><td><p>Upload the <strong>main logo</strong> for your store.</p><p></p><p>This logo is used throughout the theme wherever the standard header logo is displayed.</p></td></tr><tr><td>Desktop logo width</td><td><p>Set the width of the main logo on desktop devices.</p><p></p><p>You can adjust the value in pixels to control how large the logo appears in the header.</p><p></p><p>You can set a Minimum width "0px" and a maximum width "300px" can be given.</p></td></tr><tr><td>Transparent logo</td><td><p>Upload a separate logo for use when the header has a <strong>transparent background</strong>.</p><p></p><p>This is especially useful when the header is displayed over a slideshow, image banner, or other visual content.</p></td></tr><tr><td>Transparent logo width</td><td><p>Adjust the width of the transparent logo in pixels.</p><p></p><p>This setting allows you to maintain a suitable logo size when the transparent header is active.</p></td></tr><tr><td>Mobile logo</td><td><p>Upload a separate logo specifically for mobile devices.</p><p></p><p>If you do not upload a mobile logo, the theme will use the <strong>main logo</strong> on mobile by default.</p></td></tr><tr><td>Mobile logo width</td><td><p>Adjust the width of the logo displayed on mobile devices.</p><p></p><p>Use a smaller width than the desktop logo when necessary to maintain proper spacing within the mobile header.</p></td></tr><tr><td>Favicon image</td><td><p>Upload the image that will be used as your store's favicon.</p><p></p><p>The favicon appears in places such as:</p><ul><li>Browser tabs</li><li>Bookmarks</li><li>Browser history</li></ul><p>The uploaded favicon will be scaled down to <strong>32 × 32 px</strong>.</p></td></tr></tbody></table>

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FIq5EUhINmtEOrRaEAlSx%2Flogo.png?alt=media&amp;token=391b40ee-abbe-4837-b74f-d89610054dec" alt=""><figcaption></figcaption></figure>

### Best Practices <a href="#best-practices" id="best-practices"></a>

* Use a **PNG** or **SVG** logo with a transparent background for the best appearance.
* Keep the logo clear and readable on both desktop and mobile devices.
* Use a separate **Transparent header logo** if your transparent header is displayed over images or banners.
* **Block header logo:** Use a logo that matches the Block Header layout.
* Upload a square image for the **Favicon** to ensure it displays correctly in browser tabs.