# Logo and favicon

{% 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) <a href="#favicon-favorite-icon" id="favicon-favorite-icon"></a>

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

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/fjDPGyBTSOhzCfhIiDjo/Screenshot%202024-04-10%20143943.png" alt=""><figcaption></figcaption></figure>

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/z14kVz432NnMEq8AbqBr/blobs/7OI4xgNjyfKXwN0eGzXb/Screenshot%202024-04-10%20142329.png" alt=""><figcaption></figcaption></figure>

## Logo settings <a href="#logo-settings" id="logo-settings"></a>

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.

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**
   {% endhint %}

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