bettamax-docs

Logo and Favicon

Choose the language for this docs:

This guide will show you how to change the logo and favicon for your BettaMax store in the Branding section of Page Builder. The logo will appear in the store header, and the favicon will appear in the browser tab. This process takes approximately 5 minutes.

 

Step 1: Prepare the logo and favicon files. #

Before uploading, make sure you have the image file in the correct size. Uploading the wrong size may cause the logo to be blurry, distorted, or not display correctly on various devices.

  • Main logo: Recommended size 250 x 100px . Transparent background PNG format for best display on any background color.
  • Favicon: Size 32 x 32px or 16 x 16px . PNG or ICO format. This is the small icon displayed on the browser tab.

Here are some AI-powered logo design tools:

Tip: Don’t have a logo yet? Here are some free design tools you can use: Canva , Adobe Express , or Logomaster.ai . Once you’ve created your logo, export it as a transparent PNG file and then upload it.

 

Step 2: Access the Branding section in My Store. #

The logo and favicon are managed in the Branding section within the theme editor. This is where all of the store’s brand identity settings are centralized.

  1. From the left-hand menu bar, select My Store > Theme .
  2. Click Customize to open the Page Builder.
  3. In Page Builder, click the three-circle icon ->  Branding in the left-hand menu.

 

Step 3: Upload the new logo #

After accessing the Branding section, you will see two separate upload areas for the main logo and favicon. Upload each file to its corresponding location.

  1. In the Logo section , click on the upload area or the Upload Image button .
  2. Select a logo file from your computer (PNG or JPG format, 250 x 100px size). 
    The user uploads the logo and favicon to the store
  3. The new logo appears in the preview immediately after successful upload. Check that the logo displays correctly in the store header in the right-hand canvas.
Note: If the logo appears blurry or distorted after uploading, please check the file size. Logos that are too small (under 200px) will be stretched and lose sharpness when displayed on high-resolution screens.

 

Step 4: Upload the favicon #

A favicon is a small icon that appears on a browser tab next to the store’s name. A clear favicon helps customers recognize the store more quickly when they have multiple tabs open at the same time.

  1. In the Favicon section , just below the Logo section, click on the upload area or the Upload Image button .
  2. Select a favicon file from your computer (PNG or ICO format, 32 x 32px or 16 x 16px size).
  3. Verify that the favicon appears correctly in the preview.
Tip: Favicons should use a simplified version of the logo, for example, just the icon or the first letter. Small favicons should avoid using full-text logos as they will not be readable at 16 x 16px.

 

Step 5: Save and check the results #

After uploading both the logo and favicon, save the changes and test them directly in the store to ensure they display correctly on both desktop and mobile.

  1. Click Save in the upper corner of Page Builder to save your changes.Click Save to complete the logo update process for your store 
  2. Open the store in your browser to check if the logo is displayed in the header.
  3. Check that the favicon appears in the browser tab next to the store name.
Note: Favicon updates may take a few minutes due to browser caching. If you don’t see the new favicon, press Ctrl + F5 (Windows) or Cmd + Shift + R (Mac) to reload the page and clear the cache.

 

Related articles #

On this docs