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.
Regular favicon
Size |
Image |
Ico file |
|
32 x 32 PNG |
|
16 x 16 PNG |
|
favicon ios
Size |
Image |
57x57 |
|
60x60 |
|
72x72 |
|
76x76 |
|
114x114 |
|
120x120 |
|
144x144 |
|
152x152 |
|
180x180 |
|
android chrome
Size |
Image |
36x36 |
|
48x48 |
|
72x72 |
|
96x96 |
|
144x144 |
|
192x192 |
|
256x256 |
|
384x384 |
|
512x512 |
|
windows metro
Size |
Image |
70x70 |
|
144x144 |
|
150x150 |
|
310x150 |
|
310x310 |
|
browserconfig.xml
<?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>