Skip over navigation
Documentation

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 the 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 allows for easier management of your storefront appearance.

Replace Favicons

  1. Put the 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-57×57.png
    • Resources/public/default/favicons/apple-touch-icon-60×60.png
    • Resources/public/default/favicons/apple-touch-icon-72×72.png
    • Resources/public/default/favicons/apple-touch-icon-76×76.png
    • Resources/public/default/favicons/apple-touch-icon-114×114.png
    • Resources/public/default/favicons/apple-touch-icon-144×144.png
    • Resources/public/default/favicons/apple-touch-icon-120×120.png
    • Resources/public/default/favicons/apple-touch-icon-152×152.png
    • Resources/public/default/favicons/apple-touch-icon-180×180.png
    • Resources/public/default/favicons/favicon-32×32.png
    • Resources/public/default/favicons/android-chrome-192×192.png
    • Resources/public/default/favicons/favicon-96×96.png
    • Resources/public/default/favicons/favicon-16×16.png
    • Resources/public/default/favicons/manifest.json
    • Resources/public/default/favicons/mstile-144×144.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"
    }
    
  2. 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'
    
  3. 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
    
  4. Rebuild the assets:

    Clear the cache to reload Yaml configuration files:

    php bin/console clear:cache
    

    Publish images to the public web folder:

    php bin/console oro:assets:install
    
Browse maintained versions:3.11.6
Back to top

You will be redirected to [title]. Would you like to continue?

Yes No