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

# Logo and favicon

Upload your store's logo and favicon to control how your brand appears in the header and browser tab.

{% hint style="info" %}
**Where to find it:** In the theme editor (**Customize**), go to **Theme settings > Logo and Favicon**.
{% endhint %}

### 1. Logo

Upload the image that represents your store across your site.

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2Fgit-blob-545259ab08a022c544aa33a24cc1b1ae30935e1c%2Flogo-demo.webp?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="125.9375">Setting</th><th width="290.4296875">What it does</th><th>Recommended use</th></tr></thead><tbody><tr><td><strong>Default logo</strong></td><td>The primary logo shown in the header</td><td>Use for all standard display contexts.</td></tr><tr><td><strong>Inverse logo</strong></td><td>An alternative logo shown when the transparent header background is set to inverse.</td><td>Upload a light or white version of your logo here so it stays legible over dark sections or images.</td></tr></tbody></table>

{% hint style="info" %}
If your logo becomes hard to read against a dark or transparent background, **Inverse logo** is the fix.

**A common setup:** upload your standard dark logo as the primary, and a white version as the inverse.
{% endhint %}

{% hint style="info" %}
**Format guidance:**

* **SVG** with a transparent background produces the sharpest results at any size and is the recommended format.
* **PNG or WebP** with a transparent background also work well. Use at least **300px** wide to keep the logo crisp on high-resolution screens.
* Avoid JPG; it doesn't support transparency and will show a solid background behind your logo.
  {% endhint %}

### 2. Favicon

The **favicon** (short for Favorite Icon) is the small square icon that represents your store in the browser tab, bookmark bar, and search history. At a glance, it works like a miniature logo, helping visitors identify and switch back to your store when multiple tabs are open. A clean, recognizable favicon also signals a professional, well-considered brand.

**Where it appears:**

* **Browser tab:** to the left of the page title, visible at all times
* **Bookmark bar:** shown alongside your store name when a visitor saves the page
* **Search results:** displayed next to your URL in some search engines

Upload a square image at **32x32px** (48x48px also works).

<figure><img src="https://1411897219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP6Y96SO1y456EU9GTaCh%2Fuploads%2Fgit-blob-4d899983d1d087c28007f9c408dc46f6a39d953e%2Ffavicon-demo.webp?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Format guidance:**

* **PNG** is the most widely supported format. Use a transparent background so the icon adapts to both light and dark browser UIs.
* **ICO** files work but are not required by modern browsers.
* Avoid JPG; it doesn't support transparency and often looks blurry at small sizes.
  {% endhint %}

**What makes a good favicon:**

* Keep it to one or two shapes or letters. Anything more complex disappears at 32px. If your logo is a wordmark, consider using just the first letter or a simplified mark instead.
* Before finalizing, check it against both a white and a dark browser tab. What looks sharp on one can disappear on the other.

{% hint style="warning" %}
Browsers cache favicons aggressively. After uploading a new one, test in an incognito window or clear your browser cache to confirm the change is live.
{% endhint %}