Upload logo and favicon
Last updated
Last updated
One of the first things you want to do is to change the logo in the header and upload a favicon for the browser. You should also add your welcome message and update 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, and then remove it when you are ready to launch.
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.
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 and on PDF invoices 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.
Supported logo file formats:
On the Admin sidebar, go to Content > Design > Configuration.
Find the store view that you want to configure and click Edit in the Action column.
To upload a new logo, click Upload and choose the file from your system.
Enter the Logo Image Width and Logo Image Height in pixels.
For Logo Image Alt, enter the text that you want to appear when someone hovers over the image.
When complete, click Save Configuration.
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.
Commerce supports the following file formats as the favicon:
Using the image editor of your choice, create a 16 x 16 or 32 x 32 graphic image of your logo.
(Optional) Use one of the available online tools to convert the file to the .ico format and save the file to your computer.
On the Admin sidebar, go to Content > Design > Configuration.
In the grid, find the store view that you want to configure and click Edit in the Action column.
Click Upload and open the favicon file that you prepared.
When complete, click Save Configuration.
When prompted to refresh the cache, click the Cache Management link in the message at the top of the workspace.
In the list, select the Page Cache checkbox that is marked Invalidated.
Set Actions to Refresh and click Submit.
To view the new favicon, return to your storefront and refresh the browser.
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.
On the Admin sidebar, go to Content > Design > Configuration.
In the grid, find the store view that you want to configure and click Edit in the Action column.
For Welcome Text, enter the welcome message text that you want to appear in the header of your store.
When complete, click Save Configuration.
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.
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.
The © character code is used to insert the copyright symbol, as shown in the following examples:
Long format example
Copyright © 2013-present Luma, Inc. All rights reserved.
Short format example
© 2021 Luma, Inc. All rights reserved.
To update the copyright notice:
On the Admin sidebar, go to Content > Design > Configuration.
In the grid, find the store view that you want to configure and click Edit in the Action column.
For Copyright, enter the copyright notice that you want to appear in the footer of each page.
Use the © character code to insert a copyright symbol.
When complete, click Save Configuration.
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.
On the Admin sidebar, go to Content > Design > Configuration.
In the grid, find the store view that you want to configure and click Edit in the Action column.
Scroll down to the bottom and set the Display Demo Store Notice to your preference.
When complete, click Save Configuration.
If you are prompted to update the cache, click Cache Management in the system message and follow the instructions to refresh the cache.
| File format | Description |
|---|---|
Expand the Header section.
| File format | Description |
|---|---|
Under Other Settings, expand the HTML Head section.
If you want to remove the current favicon, click the Delete () icon in the lower-left corner of the image.
Under Other Settings, expand the Header section.
Under Other Settings, expand the Footer section.
Under Other Settings, expand the HTML Head section.
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.
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.
