---
articleType: Tutorial
categories:
- Store Design
- Creator Dashboard
last_updated: '2026-05-19'
primaryTopic: logo-and-favicon
relatedModules:
- name: theme-settings-general
  route: /admin/dashboard/store-design/general/
- name: theme-editor-layout-checkout
  route: /admin/dashboard/store-design/layout/checkout
- name: theme-editor-pages
  route: /admin/dashboard/store-design/pages/
- name: theme-editor-layout-memberships-perks
  route: /admin/dashboard/store-design/layout/memberships_perks
- name: theme-editor-layout-home
  route: /admin/dashboard/store-design/layout/index
shortDescription: Learn how to upload and resize your logo and set a custom favicon
  to personalize your Fourthwall storefront.
tags:
- site-design
- brand-identity
- storefront-customization
- logo-upload
- favicon
- header-logo
- checkout-branding
- email-branding
title: Upload and edit your logo
tasks:
- upload logo
- resize logo
- set favicon
- customize checkout branding
- add logo to site
- animated logo
terms:
- logo
- favicon
- upload logo
- add logo
- change logo
- SVG logo
- site design
- header logo
- browser tab icon
- checkout logo
- animated GIF
- GIF animation
- header animation
- static frame
labels:
- fourthwall-site-design-settings
- site-logo
- favicon
- identity
contextString: Available on all Fourthwall plans. Accessed via the site designer in the creator dashboard.
breadcrumbPath: "Getting started > Design my storefront"
path: getting-started/design-my-storefront/upload-and-edit-logo
---

# Upload and edit your logo

Your logo appears in the header of your Fourthwall site, in transactional emails supporters receive, and throughout the checkout experience. You can upload any art you own, adjust its display size, and separately set a favicon for browser tabs.

## How to add your logo

To add or change your logo, go to **Site Design** > [**Logo & Identity**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/sections/0?redirect) in your Fourthwall dashboard. This opens the site editor where you can drag and drop your logo file or browse to select it.

[Image: Site Design menu with Logo and Identity option highlighted]

Supported formats: PNG, JPG, GIF, and SVG. SVG is recommended because it stays sharp at any size.

[Image: Logo upload area with drag-and-drop and browse file options]

Use the slider below the upload area to adjust the logo size. A live preview on the right updates as you change the size. Toggle between desktop and mobile views using the tabs at the top of the page.

## Animated GIFs in the header

Animated GIF files upload successfully as your logo, but the storefront header renders them as a single static frame. There is no setting to enable GIF animation in the standard header.

To show an animated logo in your header, use one of these approaches:

- Replace the header with custom HTML and CSS. Go to **Site Design** > **Style** > **Edit HTML code**, enable **Header code**, and add a custom header that includes an `<img>` tag pointing to your animated GIF. See [Add custom HTML and code to your site](/getting-started/design-my-storefront/add-custom-html-and-code-to-your-site) for setup details.
- Build a headless storefront with the Fourthwall Storefront API and render the animated logo from your own frontend. This gives you full control over how the header behaves.

## How to set a favicon

A favicon is the small icon that appears on the left side of a browser tab next to your site name.

[Image: Browser tab showing favicon example next to site name]

To set your favicon, go to **Site Design** > [**Logo & Identity**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/sections/0?redirect). Scroll down to the favicon section and drop or browse for the art file to use. You can use the same image as your logo or choose something different.

[Image: Favicon upload section in Site Design settings]

## What happens if you don't set a favicon

A favicon is not required. If you don't upload one, Fourthwall automatically generates a favicon using your site colors and the first letter of your site name. This auto-generated favicon is used if you create a membership and supporters add a Progressive Web App (PWA) to their devices.

[Image: Auto-generated green favicon with white letter W]

[Image: Auto-generated purple favicon with white letter F]

[Image: Auto-generated olive favicon with yellow letter X]

If you have any questions, do not hesitate to contact us at [support@fourthwall.com](mailto:support@fourthwall.com).