Favicons

For the sake of simplicity and long-term code management, this project uses a script as part of the build process to generate favicons. The script itself is a configured setup of the npm module from the Realfavicongenerator.net website.

Favicon generation using the script takes several seconds each time and the assets rarely change, so this process does not happen automatically as part of a build - the assets are generated and then committed to Git. To regenerate these assets manually, run the following command:

yarn run generate:favicons

For this demo website we have introduced markup to the HTML templates, but for the final production website it is recommended to put all of the generated icon files in the root of the domain, as outlined in the FAQ. Previews of the generated icons are shown below.

Size	Image
Ico file
32 x 32 PNG
16 x 16 PNG

Size	Image
57x57
60x60
72x72
76x76
114x114
120x120
144x144
152x152
180x180

Size	Image
36x36
48x48
72x72
96x96
144x144
192x192
256x256
384x384
512x512

Size	Image
70x70
144x144
150x150
310x150
310x310

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/icons/mstile-70x70.png"/>
            <square150x150logo src="/icons/mstile-150x150.png"/>
            <wide310x150logo src="/icons/mstile-310x150.png"/>
            <square310x310logo src="/icons/mstile-310x310.png"/>
            <TileColor>#2b5797</TileColor>
        </tile>
    </msapplication>
</browserconfig>