Last updated
How to change FTW icons
This guide describes how to change the favicon and application icons in Flex Template for Web (FTW).
Table of Contents
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
-
Upload your original icon image
-
Configure platform specific icons
Note: Remember to set the "Theme color" in the Android Chrome section
-
Configure the paths to use
/static/icons/
as the root path of the icons -
Generate the icons
-
Unzip the favicons.zip archive and replace the default icons and files in public/static/icons/ with the new icons
-
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.