Last updated

How to change FTW icons

This guide describes how to change the favicon and application icons in Flex Template for Web (FTW).

The default icons are generated with RealFaviconGenerator. You can upload your original icon to the tool, customize the colors and themes, and download a generated set if icons and an HTML snippet to point to those images.

1. Use RealFaviconGenerator to generate new icons

  1. Open https://realfavicongenerator.net/
  2. Upload your original icon image
  3. Configure platform specific icons

    Note: Remember to set the "Theme color" in the Android Chrome section

  4. Configure the paths to use /static/icons/ as the root path of the icons
  5. Generate the icons
  6. Unzip the favicons.zip archive and replace the default icons and files in public/static/icons/ with the new icons
  7. Replace the default HTML snippet in public/index.html with the snippet from the generator.

    Note: Remove the manifest link from the snippet as we have a default manifest with extra data compared to the generated one. You can edit the default file as you wish.

    Example HTML snippet:

    <!-- Start Favicons from https://realfavicongenerator.net/ -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/static/icons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/static/icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/static/icons/favicon-16x16.png"
    />
    <link
      rel="mask-icon"
      href="/static/icons/safari-pinned-tab.svg"
      color="#c0392b"
    />
    <link rel="shortcut icon" href="/static/icons/favicon.ico" />
    <meta
      name="msapplication-config"
      content="/static/icons/browserconfig.xml"
    />
    <meta name="theme-color" content="#c0392b" />
    <!-- End Favicons -->

2. Change map marker icon

The map marker icon in the listing can be found in public/static/icons/map-marker-32x32.png. The dimensions should be 32x32 pixels, so the favicon-32x32.png file can be used to replace the map icon.