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"
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.
Here are the steps which I followed
Step 1:- Create app/design/<Vendor_folder>//Magento_Theme/layout/default_head_blocks.xml
Step 2: Create Magento_Theme/web directory and add you favicon to it.
Result: