How to Replace a Logo and a Favicon in the Storefront

The following article describes how to replace logo and favicon images in your custom OroCommerce application.

This topic assumes that you have previously created a custom application, a bundle, and a storefront theme, as described in the Storefront Customization topic.

Note

This tutorial is suitable for both cases: when you have created your own custom storefront theme, and when you need to change an out-of-the-box one. However, creating your own theme is recommended as it enables managing your storefront appearance easily.

Replace Favicons

Put new storefront favicon images into your bundle`s public assets folder (e.g., Resources/public/{your_theme_id}/favicons/):

The main favicon image:

Resources/public/default/favicons/favicon.ico

Additional favicon images and a web app manifest file with specified icons:

Note

For the detailed description of a purpose and role of additional favicons and the manifest.json file, check out an article on Adding favicons in a multi-browser multi-platform world.

Resources/public/default/favicons/apple-touch-icon-57x57.png

Resources/public/default/favicons/apple-touch-icon-60x60.png

Resources/public/default/favicons/apple-touch-icon-72x72.png

Resources/public/default/favicons/apple-touch-icon-76x76.png

Resources/public/default/favicons/apple-touch-icon-114x114.png

Resources/public/default/favicons/apple-touch-icon-144x144.png

Resources/public/default/favicons/apple-touch-icon-120x120.png

Resources/public/default/favicons/apple-touch-icon-152x152.png

Resources/public/default/favicons/apple-touch-icon-180x180.png

Resources/public/default/favicons/favicon-32x32.png

Resources/public/default/favicons/android-chrome-192x192.png

Resources/public/default/favicons/favicon-96x96.png

Resources/public/default/favicons/favicon-16x16.png

Resources/public/default/favicons/manifest.json

Resources/public/default/favicons/mstile-144x144.png

Example of a manifest.json file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
    "name": "Acme Inc Storefront",
    "short_name": "Acme Store",
    "icons": [
        {
            "src": "{{ site.baseurl }}/bundles/app/default/favicons/favicon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "{{ site.baseurl }}/bundles/app/default/favicons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone"
}

Specify the main favicon image in your theme configuration file:

// src/AppBundle/Resources/views/layouts/{your_theme_id}/theme.yml
icon: '@AppBundle/Resources/public/default/favicons/favicon.ico'

or

// src/AppBundle/Resources/views/layouts/{your_theme_id}/theme.yml
icon: 'bundles/app/default/favicons/favicon.ico'

Create a Layout Update file to replace other specific favicons in the storefront:

// src/AppBundle/Resources/views/layouts/{your_theme_id}/favicon.yml
layout:
    actions:
        - '@setOption':
            id: apple_57x57
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-57x57.png")'
        - '@setOption':
            id: apple_60x60
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-60x60.png")'
        - '@setOption':
            id: apple_72x72
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-72x72.png")'
        - '@setOption':
            id: apple_76x76
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-76x76.png")'
        - '@setOption':
            id: apple_114x114
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-114x114.png")'
        - '@setOption':
            id: apple_144x144
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-144x144.png")'
        - '@setOption':
            id: apple_120x120
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-120x120.png")'
        - '@setOption':
            id: apple_152x152
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-152x152.png")'
        - '@setOption':
            id: apple_180x180
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-180x180.png")'
        - '@setOption':
            id: favicon_32x32
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/favicon-32x32.png")'
        - '@setOption':
            id: android_chrome_192x192
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/android-chrome-192x192.png")'
        - '@setOption':
            id: favicon_96x96
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/favicon-96x96.png")'
        - '@setOption':
            id: favicon_16x16
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/favicon-16x16.png")'
        - '@setOption':
            id: favicon_manifest
            optionName: href
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/manifest.json")'
        - '@setOption':
            id: msapplication_tileimage
            optionName: content
            optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/mstile-144x144.png")'
        - '@remove':
            id: favicon_mask_icon

Rebuild the assets:

Clear the cache to reload Yaml configuration files:
```
php bin/console cache:clear
```
Publish images to the public web folder:
```
php bin/console assets:install --symlink
```

Replace a Logo

Put the new logo image to your bundle`s public assets folder (e.g., Resources/public/{your_theme_id}/images/logo.png).

Create the Layout Update file to replace the logo block source code in your theme:

 // src/AppBundle/Resources/views/layouts/{your_theme_id}/logo.yml
 layout:
    actions:
        - '@setBlockTheme':
            themes: 'logo.html.twig'

Create a twig template file with the new adjusted logo block:

 {# src/AppBundle/Resources/views/layouts/{your_theme_id}/logo.html.twig #}
 {% block _logo_widget %}
    {{ block_widget(block, {'attr_img': {'src': '/bundles/app/default/images/logo.png'}}) }}
 {% endblock %}

 {% block _logo_print_widget %}
     {{ block_widget(block, {'attr_img': {'src': '/bundles/app/default/images/logo.png'}}) }}
 {% endblock %}

Rebuild the assets as described in the Replace Favicons section above.