> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/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)

A **favicon**, or *favorite icon*, is a **small image displayed in the browser tab** that visually represents and differentiates your website from others.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FxpiITlAoCpzzgiZY5eud%2Fimage.png?alt=media&amp;token=d99bacd3-fd20-4c02-bffe-f4a285dd03fb" alt=""><figcaption></figcaption></figure>

When multiple tabs are open in your browser, a favicon allows you to **easily identify the correct tab** at a glance, without having to read the page title.

The recommended image size is 32x32px.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FTxEKs9BqH5JrWVm14BhQ%2Ffaviicon-image.png?alt=media&amp;token=2b2899c2-5f93-4e40-8df0-b5608f425613" alt=""><figcaption></figcaption></figure>

## Logo settings

Place your logo in the header to **capture attention** and **establish your brand’s presence** from the very first view.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F1dnYrcg6rzYq8o0gEZ9F%2Flogo-doc.png?alt=media&amp;token=a9124ec4-a08a-450e-a4f7-fa841d2d7ae0" alt=""><figcaption></figcaption></figure>

**Logo:** Upload an image to be shown in the main header area.

**Logo on transparent header:** Set a separate image to appear when the header background is transparent.

**Adjust the logo size** by modifying its width on desktop.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FvwUaLqpdWPdwEFNBlDip%2Flogo-1.png?alt=media&amp;token=4be83f38-c3a2-488f-b461-23d4b7c3b9ed" alt=""><figcaption></figcaption></figure>