How to Add a Favicon for Magento 2 Website

magento2-favicon

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 of the Magento 2 webstore.

Favicons are generally 16 x 16 pixels or 32 x 32 pixels in size. Magento allows ICO, APNG, PNG, JPG (JPEG) and GIF file types, in spite of the fact that not every browser supports these formats. The most widely-supported file format to use for a favicon is ICO. Other image file types can be used, although the format might not be supported by all browsers. There are many free tools available online that you can use to create an ICO image or convert an existing image to the format.

Magento2-Favicon-in-Address-Bar
Favicon in Address Bar

Step 1: Create a Favicon in Magento 2

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

Step 2: Upload the Favicon to Your Magento 2 Store

  1. On the Admin sidebar, click Content. After that under Design, choose Configuration.
  2. In the grid, find the store view that you want to configure. After that in the Action column, tap Edit.
  3. Under Other Settings, expand the HTML Head section. After that, follow these tips:
magento2-html-head
Magento 2 HTML Head
  1. click Upload. After that, explore to the favicon file that you prepared, and click Open.
magento2-favicon
favicon magento 2
  1. If you want to delete the current favicon, click Delete in the lower-left corner of the image. After that, upload another.
  1. After completing, click Save Configuration.

Step 3: Refresh the Cache

  1. After prompted to refresh the cache, click the Cache Management link in the message on the top of the workspace.
  2. In the list, mark the Page Cache checkbox that is marked “Invalidated.”
  3. Change Actions to “Refresh.” After that, click Submit.
  4. To view the new favicon, return to your storefront and press F5 to refresh the browser.

Favicon 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
APNG (Animated Portable Network Graphics) A file format that similar to PNG and supports simple animation.
GIF (Graphics Interchange Format) an older bitmap and widely supported that is restricted in 256 (8 bit) 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 *