Magento 2 custom child theme add favicons

magento.stackexchange https://magento.stackexchange.com/questions/99856

  •  10-12-2020
  •  | 
  •  

Question

I'm trying to add various favicons to a custom theme.

I've added /theme_dir/Magento_Theme/layout/default_head_blocks.xml and within I've tried the following:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- custom favicons -->
        <link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png"/>
        <link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png"/>
        <link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png"/>
        <link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png"/>
        <link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png"/>
        <link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png"/>
        <link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png"/>
        <link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png"/>
        <link rel="apple-touch-icon" sizes="180x180" href="iconsapple-icon-180x180.png"/>
        <link rel="icon" type="image/png" sizes="192x192"  href="icons/android-icon-192x192.png"/>
        <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png"/>
        <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png"/>
        <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png"/>

        <link rel="manifest" href="icons/manifest.json"/>
        <meta name="msapplication-TileColor" content="#ffffff"/>
        <meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png"/>
        <meta name="theme-color" content="#ffffff"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    </head>
</page>

But only the meta tags are placed in the frontend html, all <link> items are not rendered apart from the manifest, which doesn't actually give the correct link:

<link  rel="manifest" href="icons/manifest.json" href="http://localhost/pub/static/frontend/Name/theme_dir/de_DE" />
Was it helpful?

Solution

Ok, so the answer is that href needs to be replaced with src. Also you need to place or copy the normal favicon.ico file inside the theme_dir/web/ directory. All my other icons are in theme_dir/web/icons/

The following now works for me:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Custom Favicons -->
        <link rel="apple-touch-icon" sizes="57x57" src="icons/apple-icon-57x57.png"/>
        <link rel="apple-touch-icon" sizes="60x60" src="icons/apple-icon-60x60.png"/>
        <link rel="apple-touch-icon" sizes="72x72" src="icons/apple-icon-72x72.png"/>
        <link rel="apple-touch-icon" sizes="76x76" src="icons/apple-icon-76x76.png"/>
        <link rel="apple-touch-icon" sizes="114x114" src="icons/apple-icon-114x114.png"/>
        <link rel="apple-touch-icon" sizes="120x120" src="icons/apple-icon-120x120.png"/>
        <link rel="apple-touch-icon" sizes="144x144" src="icons/apple-icon-144x144.png"/>
        <link rel="apple-touch-icon" sizes="152x152" src="icons/apple-icon-152x152.png"/>
        <link rel="apple-touch-icon" sizes="180x180" src="icons/apple-icon-180x180.png"/>
        <link rel="icon" type="image/png" sizes="192x192" src="icons/android-icon-192x192.png"/>
        <link rel="icon" type="image/png" sizes="32x32" src="icons/favicon-32x32.png"/>
        <link rel="icon" type="image/png" sizes="96x96" src="icons/favicon-96x96.png"/>
        <link rel="icon" type="image/png" sizes="16x16" src="icons/favicon-16x16.png"/>
        <link rel="manifest" src="icons/manifest.json"/>

        <!-- Custom Metas -->
        <meta name="msapplication-TileColor" content="#ffffff"/>
        <meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png"/>
        <meta name="theme-color" content="#ffffff"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    </head>
</page>

OTHER TIPS

To override the default 16px x 16px favicon manually, add your custom favicon.ico in the /Magento_Theme/web/directory.

To add favicon icons of other sizes, take the following steps:

Add your icons in the /Magento_Theme/web/ directory. In the /Magento_Theme/layout/default_head_blocks.xml layout file specify the paths to the icons and their sizes.

For example, if you added a favicon-32x32.png icon and want it to be used as a 32px x 32px favicon, your default_head_blocks.xml would be like following:

<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-32x32.png" rel="icon" sizes="32x32" />
    </head>
</page>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top