Skip to main content

Upload and edit your logo

Updated May 19, 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 supporters visiting it or to show your logo during checkout and in the confirmation emails supporters 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 supporters receive, and in the checkout experience.

  1. To set up your logo, you want to, within your Fourthwall dashboard, navigate to Site Design> Logo & Identity.

Site Design menu with Logo and Identity option highlighted

  1. This will take you into edit mode, and you will see a section where you can drop or browse for the art file to be used as the logo.

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

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

  1. You can use the slider underneath the logo upload area to adjust the size of your logo. 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.

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, you can navigate to the same area as your logo (Site design > Logo & identity) This will take you into edit mode, and you will see a section where you can drop or browse for the art file to be used as the favicon.

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

Hope you found this helpful. If you have any questions, feel free to reach out to us at support@fourthwall.com.

Was this helpful?