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

# Logo and Favicon

Change favicon icon and logo

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Logo and Favicon**
2. Select image under **Logo and Favicon**
3. **Save**
   {% endhint %}

### Favicon (Favorite icon)

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/mJlMHhbJf8PtSaSV9379/Favicon-logo.jpg" alt=""><figcaption></figcaption></figure>

A **favicon**, short for favorite icon, is a tiny image that identifies and distinguishes a particular website or webpage from others.

If you have multiple tabs open in your browser at the same time, a favicon makes it easy to locate what tab you need without reading the text.

The recommended image size is 32x32px.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/BVRWTPkidQ4vVLpSCRML/Favicon.jpg" alt=""><figcaption></figcaption></figure>

## Logo settings

Add a logo in the header to grab visitors' attention and set the tone for your brand. The recommended image size and format is 200x80px .png with a transparent background.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Rxw6qbHqUhRq8jPaqrVk/logo-setting.jpg" alt=""><figcaption></figcaption></figure>

To add SVG logos, please follow these steps:

{% hint style="success" %}
**Step**:

1. Double click to your svg image to open it
2. After open image, right click it on browser and select **inspect**
3. Copy svg element and paste to **Logo SVG**

**Note:** Follow the video for more information.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/8VNk6xTTGdXKUSt333pQ/logo-svg.jpg" alt=""><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/jjzgvtkFhFs>" %}

Resize the logo image by increasing or decreasing the width on desktop/mobile

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/XXY9nthfioyBLUPkwlrA/logo-width.jpg" alt=""><figcaption></figcaption></figure>

{% file src="/files/4Uk1TlEnBh6yMHSErEZb" %}