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
     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 assets:install --symlink