Skip to main content

Upload and edit your logo

Updated October 26, 2026

A logo is your brand identity; it is the first impression, and it sets the precedent for what your fans are to expect from you. You can add your logo to your Fourthwall site to use as the favicon to delight customers visiting it or to show your logo during checkout and in the confirmation emails customers receive.

You can use any art you own as your logo. This logo will appear on the header of your site, in transactional emails your customers receive, and in the checkout experience. If you don't upload a logo, your header shows your shop name as text instead.

  1. In your Fourthwall dashboard, go to Site design > Style > Logo.

  2. Drop your logo file into the upload area or click Upload.

Logo upload area with drag-and-drop and browse file options

Supported formats include PNG, JPG, GIF, SVG, WebP, HEIC, and AVIF. SVG is recommended for logos because it stays sharp at any size.

tip

People sometimes call this a "watermark," but the correct term on Fourthwall is your logo. If you upload a logo with a transparent background, it creates a watermark effect over your site, which is the look many creators are after.

  1. To make your logo bigger or smaller, drag the Logo width slider under the upload area or type a width in pixels. For a sharp logo, upload one at least 200 px wide or tall. A preview of your site can be viewed on the right side and will update as you increase or decrease the size. Also, you can click between the desktop and mobile views of your site using the tabs at the top of the page.

Your logo file can be up to 5 MB. If your file is larger, resize or compress it before you upload it. For a sharp logo, upload one at least 200 px wide or tall. SVG is recommended because it stays sharp at any size. Animated GIFs upload fine but show as a single still frame in your header.

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 workarounds:

  • 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 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.

Adding your Favicon​

The favicon is the little image that appears on the left side of the browsing tab (see image below). You can use the same art that you use for the logo or have something different to use as your favicon.

Browser tab showing favicon example next to site name

To set up your favicon, go to Site design > Style > Favicon and drop or upload the art file to use.

Favicon upload section in Site Design settings

What if you do not set up a Favicon?​

A favicon is not required—only a nice to have. If you choose not to have a favicon, our system will automatically create one for you by using your Fourthwall site colors and the first letter of your site name. We do this in case you create a membership and want your users to have a PWA app; you will need a favicon to display. You can see 3 different examples of what those auto-generated favicons would look like:

Auto-generated green favicon with white letter W

Auto-generated purple favicon with white letter FAuto-generated olive favicon with yellow letter X

If your logo or favicon won't upload or looks wrong, email support@fourthwall.com with your shop URL, the file you're trying to use, and a screenshot of what you see.

Was this helpful?