How to Upload Logo in Magento 2

how-to-upload-photo-in-magento-2

The first thing you need to do is customize the logo in the header, and change the favicon for the browser. You’ll also want to update the copyright notice in the footer. These are some easy design works that you can deal with right away. When you develope your store, you can turn on the store demo notice, and then remove it later when the store is ready to go live. In this article, we will give you information about uploading your logo in Magento 2.

storefront-home-page-branding
Storefront Branding

Uploading your Logo

The store’s theme will determine the location and the size of the logo in the header . You can save your logo as either a GIF, PNG, or JPG (JPEG) file type, and upload them from the Admin of your store.

storefront-header-logo
Logo in Header

The logo image  is uploaded in the specific location on the server. Any image file with the name “logo.gif” is used as the default theme logo.

Full path: app/design/frontend/[vendor]/[theme]/web/images/logo.gif

Relative path: images/logo.gif

If you don’t know the size of the logo, or any other image that is used in your theme, open the page in a browser, right-click the image, and inspect the element.

Besides the logo in the header, your logo is also displayed 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 individually.

To upload your logo:

  1. On the Admin sidebar, click Content tab. Then under Design, click Configuration.
design-configuration
Design Configuration
  1. Choose the storeview that you want to configure, and in the Action column, switch to Edit mode.
  2. Open the Header section. After that follow theses tips:
design-configuration-header
Header
  1. To upload a new logo, click Upload. Then, pick the image file from your computer.
  2. Input the Logo Image Width and Logo Image Height.
  3. In the Logo Image Alt input field, fullfill the text that you want to display when someone hovers over the image.
  1. After complete, click Save Configuration.

Logo File Formats

FILE FORMAT DESCRIPTION
PNG (Portable Network Graphics) is an improved, replacement for the older GIF format. The lossless compression format proposes a high-quality bitmap image with crisp text, but a larger file size than some formats. This image format is designed to be both streamed online and viewed, also supports transparent layers
GIF (Graphics Interchange Format) an older bitmap and widely supported that is restricted in 256 (8bit) colors, which is supports transparent layers and simple animation.
JPG (JPEG) (Joint Photographics Expert Group) A compressed bitmap format which is used by most camera with digital technology. Sometimes blurry spots are noticeable in text, because the lossy compression causes some data loss

 

Leave a Reply

Your email address will not be published. Required fields are marked *