I am overriding magento2 favicon through Magento_Theme web , Firefox sees it but nor Google Chrome

464 Views Asked by At

I am adding my own favicon to a custom theme which I develop to Magento 2

I cleaned the caches using

php bin/magento cache:clean 

and

./bin/magento setup:upgrade 

added

/Magento_Theme/web/favicon-32x32.png

and the correct code in

/Magento_Theme/layout/default_head_blocks.xml

as shown here

when I browse website using Firefox it shows the favicon but Firefox never showed it

in the DevTools I see there are 3 of the favicons:

<link rel="icon" type="image/x-icon" href="http://test.me/pub/static/version1573121444/frontend/P/theme-h/en_US/Magento_Theme/favicon.ico">

<link rel="shortcut icon" type="image/x-icon" href="http://test.me/pub/static/version1573121444/frontend/P/theme-h/en_US/Magento_Theme/favicon.ico">

and also my new favicon-32x32.png

<link rel="icon" sizes="32x32" href="http://test.me/pub/static/version1573121444/frontend/P/theme-h/en_US/Magento_Theme/favicon-32x32.png">

Now why there are 3 of them , and what is that

rel="shortcut icon"

1

There are 1 best solutions below

0
suncartstore On

I tried changing the favicon with .ico and .png but only .ico worked in my case. It is also mentioned in dev docs that Not all browsers support all these formats.

enter image description here

Here are the steps which I followed

Step 1:- Create app/design/<Vendor_folder>//Magento_Theme/layout/default_head_blocks.xml

<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.ico" rel="icon" sizes="32x32" />
</head>

Step 2: Create Magento_Theme/web directory and add you favicon to it.

Result:

Output