Important

You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

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. Please follow all the steps outlines below to replace the favicon and the logo.

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

  1. Place 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    "name": "Acme Inc Storefront",
 3    "short_name": "Acme Store",
 4    "icons": [
 5        {
 6            "src": "{{ site.baseurl }}/bundles/app/default/favicons/favicon-32x32.png",
 7            "sizes": "32x32",
 8            "type": "image/png"
 9        },
10        {
11            "src": "{{ site.baseurl }}/bundles/app/default/favicons/android-chrome-192x192.png",
12            "sizes": "192x192",
13            "type": "image/png"
14        }
15    ],
16    "start_url": "/",
17    "display": "standalone"
18}

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

Important

Please make sure to remove the default Oro favicons via the layout update, otherwise, they will be used instead of the new ones. Also, please, make sure to change the option id: favicon_theme_icon. This option will change background color for the top bar on andriod devices.

 1    // src/AppBundle/Resources/views/layouts/{your_theme_id}/favicon.yml
 2    layout:
 3        actions:
 4            - '@setOption':
 5                id: apple_57x57
 6                optionName: href
 7                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-57x57.png")'
 8            - '@setOption':
 9                id: apple_60x60
10                optionName: href
11                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-60x60.png")'
12            - '@setOption':
13                id: apple_72x72
14                optionName: href
15                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-72x72.png")'
16            - '@setOption':
17                id: apple_76x76
18                optionName: href
19                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-76x76.png")'
20            - '@setOption':
21                id: apple_114x114
22                optionName: href
23                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-114x114.png")'
24            - '@setOption':
25                id: apple_144x144
26                optionName: href
27                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-144x144.png")'
28            - '@setOption':
29                id: apple_120x120
30                optionName: href
31                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-120x120.png")'
32            - '@setOption':
33                id: apple_152x152
34                optionName: href
35                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-152x152.png")'
36            - '@setOption':
37                id: apple_180x180
38                optionName: href
39                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/apple-touch-icon-180x180.png")'
40            - '@setOption':
41                id: favicon_32x32
42                optionName: href
43                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/favicon-32x32.png")'
44            - '@setOption':
45                id: android_chrome_192x192
46                optionName: href
47                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/android-chrome-192x192.png")'
48            - '@setOption':
49                id: favicon_96x96
50                optionName: href
51                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/favicon-96x96.png")'
52            - '@setOption':
53                id: favicon_16x16
54                optionName: href
55                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/favicon-16x16.png")'
56            - '@setOption':
57                id: favicon_manifest
58                optionName: href
59                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/manifest.json")'
60            - '@setOption':
61                id: msapplication_tileimage
62                optionName: content
63                optionValue: '=data["asset"].getUrl("bundles/app/default/favicons/mstile-144x144.png")'
64            - '@setOption':
65                id: favicon_theme_icon
66                optionName: content
67                optionValue: '#ed2d27'
68            - '@remove':
69                id: favicon_mask_icon

  1. Rebuild the assets:

    Clear the cache to reload the Yaml configuration files:

    php bin/console cache:clear

    Publish images to the public web folder:

    php bin/console assets:install --symlink