Important

You are browsing the documentation for version 3.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.

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. 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    "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. Specify the main favicon image in your theme configuration file:

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

    or

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

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

     1// src/AppBundle/Resources/views/layouts/{your_theme_id}/favicon.yml
 2layout:
 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        - '@remove':
65            id: favicon_mask_icon

  4. 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