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 the updated 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
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:
1 2
// src/AppBundle/Resources/views/layouts/{your_theme_id}/theme.yml icon: '@AppBundle/Resources/public/default/favicons/favicon.ico'
or
1 2
// 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
// 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:
1 2 3 4 5
// 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:
1 2 3 4 5 6 7 8
{# 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.