6

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" />
10

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>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.