# Upload logo and favicon

One of the first things you want to do is to [change the logo](https://experienceleague.adobe.com/docs/commerce-admin/start/setup/storefront-branding.html?lang=en#upload-your-logo) in the header and [upload a favicon](https://experienceleague.adobe.com/docs/commerce-admin/start/setup/storefront-branding.html?lang=en#add-a-favicon) for the browser. You should also [add your welcome message](https://experienceleague.adobe.com/docs/commerce-admin/start/setup/storefront-branding.html?lang=en#change-the-welcome-message) and [update the copyright notice](https://experienceleague.adobe.com/docs/commerce-admin/start/setup/storefront-branding.html?lang=en#change-the-copyright-notice) in the footer. These tasks are a few simple design elements that you can take care of right away. While your store is in development, you can [turn on the store demo notice](https://experienceleague.adobe.com/docs/commerce-admin/start/setup/storefront-branding.html?lang=en#set-the-store-demo-notice), and then remove it when you are ready to launch.

![Storefront branding elements](https://experienceleague.adobe.com/docs/commerce-admin/assets/storefront-home-page-branding.png?lang=en)

### Upload Your Logo <a href="#upload-your-logo" id="upload-your-logo"></a>

The size and location of the logo in the header is determined by the store theme. Your logo can be saved as either a GIF, PNG, or JPG (JPEG) file type and uploaded from the Admin of your store.

![Logo in Header](https://experienceleague.adobe.com/docs/commerce-admin/assets/storefront-header-logo.png?lang=en)

The logo image resides in the following location on the server. Any image file with the name `logo.svg` is used as the default theme logo.

Full path - `app/design/frontend/[vendor]/[theme]/web/images/logo.svg`

Relative path - `images/logo.svg`

If you do not know the size of the logo or other images used in your theme, open the page in a browser, right-click the image, and inspect the element.

NOTE

In addition to the logo in the header, your logo also appears on [email templates](https://docs.magento.com/user-guide/marketing/email-logo.html) and on [PDF invoices](https://docs.magento.com/user-guide/marketing/sales-document-pdf-logo.html) and other sales documents. The logos used for email templates and invoices have different size requirements, and must be uploaded separately. To learn more, see [Communications](https://docs.magento.com/user-guide/marketing/communications.html).

Supported logo file formats:

| File format | Description                                                                                                                                                                                                                                                                                                                                   |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| PNG         | (Portable Network Graphics) This newer alternative to the GIF format supports up to 16 million colors (24 bit). The lossless compression format produces a high-quality bitmap image with crisp text, but a larger file size than some formats. The PNG format supports transparent layers, and is designed for online viewing and streaming. |
| GIF         | (Graphics Interchange Format) A widely supported, and older bitmap format that is limited to 256 colors (8 bit). The GIF format supports simple animation and transparent layers.                                                                                                                                                             |
| JPG (JPEG)  | (Joint Photographics Expert Group) A compressed bitmap format that is used by most digital cameras. The lossy compression causes some data loss, which is sometimes noticeable as blurry spots in text.                                                                                                                                       |

1.  On the _Admin_ sidebar, go to **Content** > _Design_ > **Configuration**.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/design-configuration.png?lang=en" alt="Design Configuration page" data-size="original">
2. Find the store view that you want to configure and click **Edit** in the _Action_ column.
3.  Expand ![Expansion selector](https://experienceleague.adobe.com/docs/commerce-admin/assets/icon-display-expand.png?lang=en) the **Header** section.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/configuration-header_c1.png?lang=en" alt="Header settings" data-size="original">
4. To upload a new logo, click **Upload** and choose the file from your system.
5. Enter the **Logo Image Width** and **Logo Image Height** in pixels.
6. For **Logo Image Alt**, enter the text that you want to appear when someone hovers over the image.
7. When complete, click **Save Configuration**.

### Add a Favicon <a href="#add-a-favicon" id="add-a-favicon"></a>

_Favicon_ is short for _favorite icon_ and refers to the little icon on the tab of each browser page. Depending on the browser, the favicon also appears in address bar, just before the URL.

A favicon is generally 16 x 16 pixels or 32 x 32 pixels in size. Commerce accepts ICO, PNG, APNG, GIF, and JPG (JPEG) file types, although not all browsers support these formats. The most widely supported file format to use for a favicon is ICO. You can use other image file types, but the format might not be supported by all browsers. There are many free tools available online that you can use to generate an ICO image or convert an image to that format.

![Favicon in the browser tab](https://experienceleague.adobe.com/docs/commerce-admin/assets/storefront-favicon.png?lang=en)

Commerce supports the following file formats as the favicon:

| File format | Description                                                                                                                                                                                                                                                                                                                                   |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ICO         | This image file format is designed for small-size computer icon images. Mostly used in Microsoft® Windows OS, the ICO format can contain images of up to 256 x 256 pixels and 16 million colors (24 bit) with 8 bits of transparency.                                                                                                         |
| PNG         | (Portable Network Graphics) This newer alternative to the GIF format supports up to 16 million colors (24 bit). The lossless compression format produces a high-quality bitmap image with crisp text, but a larger file size than some formats. The PNG format supports transparent layers, and is designed for online viewing and streaming. |
| APNG        | (Animated Portable Network Graphics) A file format similar to PNG that supports simple animation.                                                                                                                                                                                                                                             |
| GIF         | (Graphics Interchange Format) A widely supported, and older bitmap format that is limited to 256 colors (8 bit). The GIF format supports simple animation and transparent layers.                                                                                                                                                             |
| JPG (JPEG)  | (Joint Photographics Expert Group) A compressed bitmap format that is used by most digital cameras. The lossy compression causes some data loss, which is sometimes noticeable as blurry spots in text.                                                                                                                                       |

#### Step 1: Create a favicon <a href="#step-1-3a-create-a-favicon" id="step-1-3a-create-a-favicon"></a>

1. Using the image editor of your choice, create a 16 x 16 or 32 x 32 graphic image of your logo.
2. (Optional) Use one of the available online tools to convert the file to the .ico format and save the file to your computer.

#### Step 2: Upload the favicon to your store <a href="#step-2-3a-upload-the-favicon-to-your-store" id="step-2-3a-upload-the-favicon-to-your-store"></a>

1. On the _Admin_ sidebar, go to **Content** > _Design_ > **Configuration**.
2. In the grid, find the store view that you want to configure and click **Edit** in the _Action_ column.
3.  Under _Other Settings_, expand ![Expansion selector](https://experienceleague.adobe.com/docs/commerce-admin/assets/icon-display-expand.png?lang=en) the **HTML Head** section.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/configuration-html-head_c1.png?lang=en" alt="HTML Head settings" data-size="original">
4. If you want to remove the current favicon, click the _Delete_ (![Trash can icon](https://experienceleague.adobe.com/docs/commerce-admin/assets/icon-delete-trashcan.png?lang=en)) icon in the lower-left corner of the image.
5.  Click **Upload** and open the favicon file that you prepared.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/favicon-upload.png?lang=en" alt="Uploaded favicon" data-size="original">
6. When complete, click **Save Configuration**.

#### Step 3: Refresh the cache <a href="#step-3-3a-refresh-the-cache" id="step-3-3a-refresh-the-cache"></a>

1. When prompted to refresh the cache, click the **Cache Management** link in the message at the top of the workspace.
2. In the list, select the **Page Cache** checkbox that is marked `Invalidated`.
3. Set **Actions** to `Refresh` and click **Submit**.
4. To view the new favicon, return to your storefront and refresh the browser.

### Change the welcome message <a href="#change-the-welcome-message" id="change-the-welcome-message"></a>

The welcome message in the header expands to include the name of the customer who is logged in. Before you launch your store, be sure to change the default _Welcome_ text for each store view.

![Welcome message](https://experienceleague.adobe.com/docs/commerce-admin/assets/storefront-welcome-message.png?lang=en)

1. On the _Admin_ sidebar, go to **Content** > _Design_ > **Configuration**.
2. In the grid, find the store view that you want to configure and click **Edit** in the _Action_ column.
3. Under _Other Settings_, expand ![Expansion selector](https://experienceleague.adobe.com/docs/commerce-admin/assets/icon-display-expand.png?lang=en) the **Header** section.
4.  For **Welcome Text**, enter the welcome message text that you want to appear in the header of your store.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/configuration-header_c1.png?lang=en" alt="Header settings" data-size="original">
5. When complete, click **Save Configuration**.
6. When prompted to update the Page Cache, click the **Cache Management** link at the top of the workspace and follow the instructions to refresh the cache.

### Change the copyright notice <a href="#change-the-copyright-notice" id="change-the-copyright-notice"></a>

Your store displays a copyright notice in the footer of each page. As a best practice, the copyright notice should include the current year, and identify your company as the legal owner of the content on the site.

![Copyright notice example](https://experienceleague.adobe.com/docs/commerce-admin/assets/storefront-footer-copyright.png?lang=en)

The `&copy;` character code is used to insert the copyright symbol, as shown in the following examples:

*   Long format example

    `Copyright &copy; 2013-present Luma, Inc. All rights reserved.`
*   Short format example

    `&copy; 2021 Luma, Inc. All rights reserved.`

To update the copyright notice:

1. On the _Admin_ sidebar, go to **Content** > _Design_ > **Configuration**.
2. In the grid, find the store view that you want to configure and click **Edit** in the _Action_ column.
3.  Under _Other Settings_, expand ![Expansion selector](https://experienceleague.adobe.com/docs/commerce-admin/assets/icon-display-expand.png?lang=en)the **Footer** section.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/configuration-footer_c1.png?lang=en" alt="Footer design settings" data-size="original">
4.  For **Copyright**, enter the copyright notice that you want to appear in the footer of each page.

    Use the `&copy;` character code to insert a copyright symbol.
5. When complete, click **Save Configuration**.

### Set the store demo notice <a href="#set-the-store-demo-notice" id="set-the-store-demo-notice"></a>

If your store is online, but still under construction, you can display a store demo notice at the top of the page to let people know that the store is not yet open for business. When you are ready to _go live_, simply remove the message. This is similar to flipping the sign hanging in the window from _Closed_ to _Open_. The format of the demo notice is determined by the theme of your store.

![Storefront demo notice](https://experienceleague.adobe.com/docs/commerce-admin/assets/storefront-demo-notice.png?lang=en)

1. On the _Admin_ sidebar, go to **Content** > _Design_ > **Configuration**.
2. In the grid, find the store view that you want to configure and click **Edit** in the _Action_ column.
3.  Under _Other Settings_, expand ![Expansion selector](https://experienceleague.adobe.com/docs/commerce-admin/assets/icon-display-expand.png?lang=en) the **HTML Head** section.

    <img src="https://experienceleague.adobe.com/docs/commerce-admin/assets/configuration-html-head_c1.png?lang=en" alt="HTML Head" data-size="original">
4. Scroll down to the bottom and set the **Display Demo Store Notice** to your preference.
5. When complete, click **Save Configuration**.
6. If you are prompted to update the cache, click **Cache Management** in the system message and follow the instructions to refresh the cache.

\
