Adding custom favicons for different devices in Magento 2

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 16x16 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

/Magento_Theme/layout/default_head_blocks.xml:

html
1 2 3 4 5 <?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 16x16 px size, just place a favicon.ico file sized 48x48 px in your theme (the same path as in the paragraph above). Also, place there favicon-16x16.png and favicon-32x32.png. These icons will be used by most browsers.

/Magento_Theme/web:

favicon.ico
favicon-16x16.png
favicon-32x32.png

/Magento_Theme/layout/default_head_blocks.xml:

html
1 2 <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.

/Magento_Theme/web:

android-chrome-192x192.png
android-chrome-512x512.png

/Magento_Theme/layout/default_head_blocks.xml:

html
1 2 3 <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"/>

/Magento_Theme/web/site.webmanifest:

javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 { "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:

/Magento_Theme/web:

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

/Magento_Theme/layout/default_head_blocks.xml:

html
1 2 <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:

/Magento_Theme/web:

mstile-150x150.png

/Magento_Theme/layout/default_head_blocks.xml:

html
1 2 <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!