The Magento 2 admin panel enables changing the default favicon but the functionality is limited to setting a single file version. How to add custom favicons in Magento 2 in the right way? Sending an icon via the admin panel will overwrite the default 16×16 px icon and will get a priority over the changes we’re about to make. So if you used this option, reset this setting in the configuration. 

In this article, I will show you how to add icons to your Theme with different sizes for various devices.

For starters – layout XML

<your_theme_path>/Magento_Theme/layout/default_head_blocks.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    </head>
</page>

Paste the above XML in <your_theme_path>/Magento_Theme/layout/default_head_blocks.xml. You will put all entries concerning the icons in the head node. All icon files and manifests, in turn, will go to <your_theme_path>/Magento_Theme/web.

Default icon

To overwrite the default icon in the standard 16×16 px size, just place a favicon.ico file sized 48×48 px in your theme (the same path as in the paragraph above). Also, place there favicon-16×16.png and favicon-32×32.png. These icons will be used by most browsers.

<your_theme_path>/Magento_Theme/web:

favicon.ico
favicon-16×16.png
favicon-32×32.png

<your_theme_path>/Magento_Theme/layout/default_head_blocks.xml:

<link src="Magento_Theme::favicon-16x16.png" rel="icon" type="image/png" sizes="16x16"/> 
<link src="Magento_Theme::favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>

Custom favicons for Android devices

Add custom favicons in Magento 2 using a manifest. Copy files to the catalog, add entires in default_head_blocks.xml and create a manifest.

<your_theme_path>/Magento_Theme/web:

android-chrome-192×192.png
android-chrome-512×512.png

<your_theme_path>/Magento_Theme/layout/default_head_blocks.xml:

<link src="Magento_Theme::android-chrome-192x192.png" rel="icon" type="image/png" sizes="192x192"/>
<link src="Magento_Theme::android-chrome-512x512.png" rel="icon" type="image/png" sizes="512x512"/>
<link rel="manifest" src="Magento_Theme::site.webmanifest"/>

<your_theme_path>/Magento_Theme/web/site.webmanifest:

{
    "name": "Site name",
    "short_name": "Site short name",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Remember to adjust the HEX entries in theme_color and background_color to the color theme of your choice. 

Custom favicons for Apple devices

Copy the icon files to the catalog and add the config entries:

<your_theme_path>/Magento_Theme/web:

apple-touch-icon.png
safari-pinned-tab.svg

<your_theme_path>/Magento_Theme/layout/default_head_blocks.xml:

<link rel="apple-touch-icon" sizes="180x180" src="Magento_Theme::apple-touch-icon.png"/>
<link rel="mask-icon" src="Magento_Theme::safari-pinned-tab.svg"/>

Windows tiles

Copy the icon files to the catalog and add the config entries:

<your_theme_path>/Magento_Theme/web:

mstile-150×150.png

<your_theme_path>/Magento_Theme/layout/default_head_blocks.xml:

<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="Magento_Theme::mstile-150x150.png"/>

Remember to adjust the HEX entry in msapplication-TileColor to the color theme of your choice. 

 

That’s it!