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
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.
favicon.ico
favicon-16x16.png
favicon-32x32.png
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.
android-chrome-192x192.png
android-chrome-512x512.png
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"/>
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:
apple-touch-icon.png
safari-pinned-tab.svg
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:
mstile-150x150.png
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!