Magento favicon: How to upload or change it on your Magento website

Magento’s favicon is just a small icon, but it is necessary for websites because of its incredible benefits. In Magento default, the favicon is set to the Magento logo. However,  you can upload a favicon of your brand logo or change it to any other custom image you wish. In this blog, we’ll continue with how to upload or change the favicon on Magento 2 website. Let’s get started right away!

What is Magento Favicon?

magento-favicon

Favicon is a small icon but extremely crucial for a Magento website. It is displayed on the tab of each browser page or in the address bar next to its URL. Favicon complements the legitimacy of your site and helps to maximize your online brand as well as trust from potential customers.

Benefits Of Favicons

  • Maximize brand Presence: Favicon works the same way as logos do for websites, it is the reason why logos or their variations are often selected for this role. It helps to maximize your brand recognizability among a variety of different businesses.
  • Build credibility and trust: Favicons make the online store look more credible and professional even if they are a little factor of a website. Incorporating them into one website shows attention to the details that provide visitors with the idea of ​​a complete website.
  • Bring convenience for users: Out of dozens of tabs enabled, it is too difficult for you to find out the tab that you need without favicons. Favicons help visitors locate your page easier when they have multiple tabs open.
  • Improve SEO: Most people think that Favicons do not really helpful with SEO. However,  it is indirectly responsible for boosting your ranking on search engines. Through the advantages we mentioned above, Google can consider these as great signals to prioritize the display of your website when searched.

Magento 2 enables the admin to upload Magento favicon from the admin panel. We suggest you use the ICO image format for the favicon in Magento 2 however PNG, JPG, GIF, JPEG, APNG, and SVG file types are also allowed to apply. Magento recommends that the dimension of your favicon should be 16×16 pixels or 32×32 pixels which serves as branding for your website. Besides, the most popular supported file format to apply for a favicon is ICO. Because of their tiny size, favicons will display best with simple images or one-to-three characters of text. There are many tools available for you to create an ICO image or convert an exciting image to the format you want.  You can use the following available free tools:

  • Online Converter
  • ICO Converter
  • ConvertICO
  • Onlineconvertfree

>> Also read: Magento 2 logo: Methods to change it for your Magento store and email

How to Change favicon in Magento 2

Next, we’ll explore how to upload and change the favicon in Magento 2

Step 1: Generate A Magento 2 favicon

  • Generate a 16×16 (highly recommended) or 32×32 graphic image of your band logo
  • Turn the file into one of the following formats: ICO, PNG, JPG, or SVG. However, not all browsers support all these formats, so it’s better to select the ICO format

Step 2: Upload the Magento favicon for your Website

  • Go to the Admin account
  • Move to Contents → Design → Configuration.
  • Select a specific store view you want to replace the Magento 2 favicon
magento-favicon
  • Expand the HTML Head section
  • Upload your Magento favicon
  • After completing, you click on the Save Configuration button
Magento favicon

Step 3: Refresh The Cache

  • When reminded to refresh the cache, click the Cache Management link in the message popup or move to Admin  System  Cache Management
  • In the list, you set the checkbox that is marked Invalidated.
  • Set Actions to Refresh and then you click on Submit to allow the configuration to come into effect.

How to add a custom Magento favicon manually?

If you want to override the default 16px x 16px favicon manually, you can add your custom favicon.ico in the <your_theme_dir>/Magento_Theme/web/ directory.

Also, to add a favicon of other sizes, follow the below steps:

  • Add the icons you choose in the <your_theme_dir>/Magento_Theme/web/ directory.
  • In the <your_theme_dir>/Magento_Theme/layout/default_head_blocks.xml layout file specify the paths to the icons and their dimension

For instance, if you added a favicon-32×32.png icon and want it to be used as a 32px x 32px favicon, your default_head_blocks.xml would be:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Magento_Theme::favicon-32×32.png" rel="icon" sizes="32×32" />
    </head>
</page>

To see the changes, you clear the browser cache, and the following directories on the server (do not delete the .htaccess file!):

  • pub/static
  • all directories under var

Summing Up

The above are all steps to upload or change the Magento favicon on your Magento website. If you have any problems when following our instructions, then you can get in touch with our Magento experts for any free support.  Other than that, there are still many other areas of enhancements a Magento 2 store owner should consider. Visit our Magento Website Development service to leverage your online Magento store. magento-favicon