You can change MyCashflow's default favicon by editing your store theme's files.

A favicon is an icon that appears in the web browser's tab when visitors come to your online store. The default favicon icon for MyCashflow online shops shows a shopping cart with grey background.

Here's how to enable a custom favicon for your online store:

  1. Create a favicon in an image editing program of your choice.

    The image should be a square-shaped PNG file. The recommended size is 512 x 512 pixels.

  2. In the admin panel, go to Settings > General settings.
  3. Upload the image you've created in the Favicon field.

    FaviconThe setting requires adding support to the theme (the built-in themes don't support this setting).

    The <head> section of the page template must include the {Favicon} tag in the theme for the favicon to be visible in the online store.

    In Barebones, the <head> section can be found in the helpers/header.html file.

    If you're not familiar with modifying your store theme's HTML/CSS/JavaScript files, contact the designer of your online store's theme or the MyCashflow customer service.

The favicon is now enabled in all store versions.

Using alternative favicons

You can add multiple different favicons of different sizes to your store theme for different purposes. Different devices and programs use favicons of different sizes, so a single icon may not be suitable for all purposes.

  1. Create all favicons you need.
  2. Create a helper containing the favicon markup, e.g. in the file helpers/favicon.html.
    <link rel="shortcut icon" type="image/ico" href="{ThemeUrl}/images/favicon-32x32.ico" sizes="32x32"/>
<link rel="apple-touch-icon" type="image/ico" href="{ThemeUrl}/images/favicon-180x180.ico" sizes="180x180"/>
<link rel="apple-touch-icon" type="image/ico" href="{ThemeUrl}/images/favicon-196x196.ico" sizes="196x196"/>

    This example creates references to three favicons of different sizes displayed in different contexts based on size. The last two rows are suitable e.g. for retina screens typical for iPhones and iPads.

  3. Add a reference to the favicon helper file to your store theme.

    The required markup is in bold in the code sample below:

    <head>
    <meta charset="utf-8" />
    <title>{Title}</title>
    <meta name="description" content="{MetaDescription}" />
    <meta name="robots" content="index, follow" />
    {Feed}
    <link rel="canonical" href="{ShopUrl}{CanonicalUrl}" />
    {Helper(file: 'helpers/favicon')}
    {Helper(file: 'helpers/styles')}
</head>

    If you copy this example for yourself, make sure the names of the folders and files are the same as in your store theme.

    The theme's <head> section is often located in the file helpers/header.html, especially if the theme is based on the MyCashflow default theme.

If different versions of your store use different themes, make the necessary changes to all relevant themes. In this way, you can use different favicons in different versions.