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

# Add your logo and favicon to Facet

> Upload your store logo in Facet, set how wide it shows in the header, footer and password page, and add the favicon shown in browser tabs.

The **Logo** settings hold the picture that represents your store across Facet. You upload it once here, and the header, the mobile menu, the footer and the password page use it. This page covers the logo, its width and the favicon.

## What these settings control

* The logo in the header and at the top of the mobile menu.
* The logo in the footer's **Brand** block and on the password page.
* The default picture of the footer's **Large logo** block, when that block has no picture of its own.
* The width of the logo.
* The small icon in the browser tab (favicon).

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Logo**

Expand **Logo**, then click **Select** under **Logo** to upload or choose your picture.

![The theme editor with Theme settings open and the Logo group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/logo/logo-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=928cf170901d882343bcaa3644e97012)

## Logo settings

![Theme editor sidebar showing the Logo theme settings: Logo, Logo width, Favicon, 32 x 32px .png recommended.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/logo/logo-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=b20bcf2b9e707fdc7351da9a5ee1c796)

* **Logo**: the picture used as your store logo. Without one, Facet shows your store name in the heading font instead.
* **Logo width**: from 80 to 300 pixels. Default: 172. Sets the width of the logo picture in the header, the mobile menu, the footer **Brand** block and the password page. The height follows the picture's shape. On narrow screens the logo never grows wider than the space it sits in.
* **Favicon**: the icon in the browser tab and in bookmarks. Use a 32 x 32 pixel .png file.

> [!NOTE]
>
> The header has its own **Use SVG code for logo** option. When it is on and **Logo SVG code** holds code, the header and the mobile menu show the SVG instead of this picture. See [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md).

## Best practices

* **Upload a wide enough file.** Facet requests the logo at 600 pixels wide, so a file at least that wide stays sharp on high-resolution screens.
* **Use a transparent background.** A .png or .svg logo with no background sits cleanly on every color scheme, including a transparent header over a banner.
* **Keep the favicon simple.** At 32 pixels a full wordmark is unreadable. Use a single letter or a symbol from your logo.

## Related guides

> [card] [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md)
>
> Place the logo and set up the SVG logo option.

> [card] [Footer](https://docs.shopify.lightsout.agency/themes/facet/footer/footer.md)
>
> Show the logo in the footer's **Brand** and **Large logo** blocks.


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