How to Change Favicon in Magento 2

Change Favicon Magento 2 - 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 the address bar, just before the URL. Favicons are generally 16 x 16 pixels or 32 x 32 pixels in size. Magento accepts ICO, PNG, JPG, and SVG file types, although not all browsers support these formats. The most widely supported file format to use for a favicon is ICO. There are many free tools available online that you can use to generate an ICO image or convert an existing image to the format.

In case website visitors open many tabs and cannot see the website name anymore, they will identify your store by looking at the favicon. The favicon can represent your brand identity, so making it stand out from the crowd will grant you a chance to be more unique in customers’ minds. Here are 3 steps for you to change the favicon for your Magento 2 website.

3 Steps to Change Favicon in Magento 2

You can change Favicon in Magento 2 by the following steps:

• Step 1: Create a Favicon
• Step 2: Upload the Favicon to your store
• Step 3: Refresh the Cache

Step 1: Create a Favicon

• Create a 16x16 or 32x32 graphic image of your logo, using the image editor of your choice.
• (Optional) Use one of the available online tools to convert the file to the .ico format. Then, save the file to your computer.

Step 2: Upload the Favicon to Your Store

Magento 2.0.x

• On the Admin sidebar, click on Stores. Then under Settings, choose Configuration.
• In the panel on the left under General, choose Design.
• Expand the HTML Head section. Then, do the following:

Magento 2.1+

From Magento 2.1, this path was changed. It is located at Content > Configuration > Select your current theme > HTML Head

• On the Admin sidebar, click on Content. Then under Design, choose Configuration.

• In the panel on the left under Design Configuration, click Edit your current website, storeview.

• Expand the HTML Head section. Then, do the following:

• Click on Choose File. Then, find the favicon file that you prepared.

• If you want to delete the current favicon, mark the Delete Image checkbox.

• When complete, click on Save Config.

Step 3: Refresh the Cache

• When prompted to refresh the cache, click the Cache Management link in the message at the top of the workspace.
• In the list, mark the Page Cache checkbox that is marked Invalidated
• Set Actions to “Refresh.” Then, click on Submit.
• To view the new favicon, return to your storefront and press F5 to refresh the browser.

Start changing your favicon now to drive more traffic and reduce bounce rates by giving them a clear brand identity. Today’s post has discussed steps to change the favicon in Magento 2 quickly. If you have any concerns, don’t hesitate to share with us in the comment section.

FAQs

1. What size is Magento’s favicon?

The ideal favicon size in Magento is 16 x 16 pixels.

2. Can I add a custom favicon?

Absolutely! You can upload a new custom favicon following our instructions above.

3. What file formats work with Magento 2 favicon?

Here are the file formats that favicon in Magento 2 supports: PNG, JPG, ICO, and SVG.

4. How to clear the cache to see the new favicon?

Go to System > Tools > Cache Management > hit the Flush Magento Cache button to clear the cache. The system will then display the new updated icon.

5. Where can I add a custom theme favicon?

You should add your icons in the <your_theme_dir>/Magento_Theme/web/ directory.

Related Topics:

• How to Configure the Pagination Controls
• How to enable SSL
• How to Configure FedEx Carrier