Use realfavicongenerator.net as an icon baseline

docs/README.md

@@ -17,3 +17,4 @@ Documentation for specific topics can be found in the following files:
  - [Analytics](analytics.md)
  - [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md)
  - [i18n](i18n.md)
+ - [Colors and icons](colors-and-icons.md)

docs/colors-and-icons.md

@@ -0,0 +1,62 @@
+# Colors and icons
+
+One of the first customisations is to change the marketplace colors
+and icons.
+
+# Colors
+
+To change the marketplace colors, open the
+[src/marketplace.css](../src/marketplace.css) file and change the
+color variables:
+
+```css
+--marketplaceColor: #c0392b;
+--marketplaceColorLight: #ff4c38;
+--marketplaceColorDark: #8c291e;
+```
+
+# Icons
+
+The default icons are generated with
+[RealFaviconGenerator](https://realfavicongenerator.net/). You can
+upload your original icon to the tool, customise the colors and
+themes, and download a generated set if icons and an HTML snippet to
+point to those images.
+
+1. Open https://realfavicongenerator.net/
+
+1. Upload your original icon image
+
+1. Configure platform specific icons
+
+   **Note:** Remember to set the "Theme color" in the Android Chrome section
+
+1. Configure the paths to use `/static/icons/` as the root path of the icons
+
+1. Generate the icons
+
+1. Unzip the favicons.zip archive and replace the default icons and
+   files in [public/static/icons/](../public/static/icons/) with the
+   new icons
+
+1. Replace the default HTML snippet in
+   [public/index.html](../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:**
+
+   ```html
+    <!-- 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 -->
+   ```

public/index.html

@@ -9,16 +9,17 @@
     <!--!googleAnalyticsScript-->
 
     <link rel="manifest" href="%PUBLIC_URL%/static/manifest.json">
-    <link rel="icon" sizes="32x32" type="image/x-icon" href="%PUBLIC_URL%/static/favicon.ico">
-    <link rel="icon" sizes="192x192" type="image/png" href="%PUBLIC_URL%/static/webapp-icon-192x192.png" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/static/touch-icon-iphone-60x60.png">
-    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/static/apple-touch-icon-ipad-57x57.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/static/apple-touch-icon-ipad-57x57@2x.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/static/apple-touch-icon-ipad-76x76.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/static/apple-touch-icon-ipad-76x76@2x.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/static/apple-touch-icon-iphone-retina-60x60.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/static/apple-touch-icon-iphone-retina-60x60@2x.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/static/apple-touch-icon-iphone-retina-60x60@3x.png">
+
+    <!-- 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 -->
+
     <!--!link-->
 
     <style>

public/static/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/icons/mstile-150x150.png"/>
+            <TileColor>#c0392b</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/static/icons/safari-pinned-tab.svg

@@ -0,0 +1,116 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="2500.000000pt" height="2500.000000pt" viewBox="0 0 2500.000000 2500.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,2500.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M7992 24494 c-154 -51 -268 -165 -323 -322 -25 -71 -32 -204 -14
+-271 12 -46 52 -138 75 -171 31 -46 163 -290 265 -492 135 -267 263 -555 378
+-853 67 -174 227 -649 241 -717 3 -13 18 -70 35 -128 16 -58 46 -172 66 -255
+48 -203 54 -227 61 -271 3 -20 10 -48 15 -61 5 -13 7 -23 4 -23 -2 0 1 -15 6
+-32 5 -18 12 -53 15 -78 3 -25 9 -63 14 -85 5 -22 16 -85 25 -140 8 -55 20
+-127 25 -160 6 -33 12 -80 15 -105 3 -25 10 -85 16 -135 6 -49 12 -109 14
+-131 2 -23 6 -69 10 -103 10 -90 22 -264 31 -446 4 -101 5 -655 0 -755 -5 -95
+-16 -273 -20 -325 -2 -22 -7 -74 -11 -115 -3 -41 -8 -93 -10 -115 -2 -22 -6
+-61 -9 -87 -3 -27 -8 -69 -11 -95 -7 -63 -17 -133 -22 -158 -2 -11 -6 -40 -9
+-65 -5 -40 -57 -345 -70 -410 -11 -53 -14 -71 -18 -92 -3 -13 -12 -57 -21 -98
+-9 -41 -18 -83 -20 -93 -2 -9 -11 -44 -19 -78 -9 -33 -18 -74 -21 -89 -3 -16
+-9 -39 -14 -52 -5 -13 -9 -26 -10 -30 0 -5 -1 -9 -2 -10 0 -2 -2 -12 -4 -24
+-8 -40 -114 -399 -153 -519 -62 -188 -127 -365 -204 -555 -63 -158 -88 -217
+-147 -344 l-17 -39 -42 59 c-23 32 -46 64 -51 71 -12 14 -172 257 -220 333
+-19 30 -47 74 -63 98 -15 24 -28 45 -28 47 0 3 -19 35 -41 72 -40 65 -82 139
+-120 211 -10 18 -22 38 -27 45 -10 12 -244 476 -275 547 -180 402 -305 728
+-411 1075 -64 208 -88 256 -165 335 -98 102 -239 155 -386 147 -147 -9 -199
+-34 -380 -187 -320 -270 -738 -682 -1006 -990 -40 -47 -76 -87 -79 -90 -3 -3
+-39 -45 -80 -95 -41 -49 -82 -99 -92 -110 -59 -67 -318 -408 -408 -535 -71
+-103 -254 -373 -260 -385 -3 -6 -33 -55 -68 -110 -164 -258 -296 -494 -461
+-825 -100 -199 -271 -569 -271 -585 0 -3 -9 -24 -19 -48 -80 -174 -243 -627
+-330 -917 -17 -58 -39 -127 -47 -155 -8 -27 -26 -90 -39 -140 -13 -49 -31
+-117 -40 -150 -45 -172 -139 -606 -159 -735 -3 -19 -10 -57 -15 -85 -5 -27
+-12 -70 -16 -95 -3 -25 -10 -72 -15 -105 -13 -84 -47 -357 -55 -435 -3 -36 -8
+-79 -10 -95 -2 -17 -6 -71 -10 -120 -3 -50 -8 -109 -10 -132 -27 -293 -27
+-992 0 -1413 7 -110 22 -285 30 -340 3 -19 7 -60 10 -90 8 -76 24 -211 29
+-236 2 -12 7 -45 11 -75 6 -52 20 -145 30 -202 3 -15 9 -55 15 -90 6 -34 15
+-82 20 -107 5 -25 11 -58 14 -75 23 -151 140 -638 221 -915 172 -595 488
+-1372 761 -1870 22 -41 57 -105 76 -141 125 -234 458 -767 577 -925 9 -12 23
+-32 31 -44 25 -37 257 -348 297 -398 68 -85 277 -336 308 -371 16 -19 35 -39
+40 -45 6 -6 46 -52 90 -101 257 -289 699 -717 970 -939 33 -27 70 -59 81 -70
+12 -12 34 -30 50 -41 15 -11 58 -45 94 -75 214 -176 657 -491 925 -657 92 -58
+329 -199 385 -230 30 -17 73 -41 95 -54 303 -172 847 -429 1185 -558 47 -18
+94 -37 105 -42 11 -5 40 -16 65 -25 25 -9 108 -38 185 -65 119 -42 457 -152
+505 -164 8 -3 49 -14 90 -25 110 -31 496 -129 533 -136 18 -3 73 -14 122 -25
+50 -11 113 -25 140 -30 28 -5 59 -11 71 -13 47 -9 382 -65 419 -70 22 -3 72
+-10 110 -15 120 -17 159 -22 200 -26 22 -2 63 -6 90 -9 28 -3 77 -8 110 -10
+33 -3 87 -8 120 -11 218 -21 464 -30 825 -30 303 0 638 10 701 20 13 2 62 6
+109 10 127 9 186 14 285 25 50 6 110 13 135 15 41 5 83 10 150 20 14 2 48 7
+75 10 28 3 73 10 100 15 28 5 64 11 80 14 29 4 119 19 180 31 17 3 53 10 80
+15 41 7 160 31 225 45 8 2 47 10 85 19 521 112 1305 365 1740 561 17 7 98 43
+180 80 144 64 501 240 615 302 325 179 587 335 805 481 181 121 488 340 560
+399 6 5 28 22 50 38 22 17 42 32 45 35 3 4 39 33 80 65 71 56 232 188 256 210
+6 6 37 33 70 62 178 154 318 286 519 488 176 177 252 257 421 445 214 238 550
+668 725 925 30 44 57 81 62 83 4 2 7 9 7 15 0 6 8 20 18 31 15 17 129 193 209
+322 13 20 178 302 247 419 43 75 290 564 343 680 31 70 43 97 101 230 65 150
+198 491 228 585 8 25 19 54 24 65 5 11 28 79 50 150 23 72 45 139 50 150 5 11
+10 29 13 40 3 11 23 83 45 160 71 248 140 518 155 605 3 14 10 43 16 65 6 22
+13 58 17 80 3 22 8 43 9 46 2 3 7 28 11 55 3 27 8 52 10 55 2 3 5 19 8 35 30
+178 49 292 66 409 28 188 28 189 36 275 3 41 8 78 10 82 2 3 7 46 10 95 3 48
+7 99 9 113 3 14 7 63 10 110 4 47 8 110 10 140 23 304 23 1080 0 1275 -2 17
+-6 73 -10 125 -7 107 -15 189 -30 330 -2 19 -7 60 -10 90 -3 30 -8 66 -10 80
+-2 14 -9 63 -15 110 -9 72 -66 418 -90 545 -18 96 -51 248 -75 349 -15 60 -28
+116 -30 125 -18 93 -135 501 -158 551 -22 48 -84 135 -114 160 -121 103 -276
+148 -421 124 -99 -17 -181 -58 -287 -144 -225 -182 -385 -307 -493 -382 -18
+-13 -42 -31 -54 -41 -11 -9 -24 -17 -28 -17 -3 0 -15 -8 -26 -18 -57 -53 -567
+-373 -759 -477 -38 -21 -95 -52 -125 -68 -61 -34 -468 -237 -474 -237 -3 0
+-44 -18 -91 -40 -47 -22 -89 -40 -93 -40 -4 -1 -25 -9 -47 -20 -61 -29 -73
+-27 -73 18 1 45 -11 275 -17 352 -2 30 -7 95 -10 143 -3 48 -8 102 -10 120 -2
+18 -6 70 -10 117 -3 47 -8 96 -10 110 -3 14 -7 50 -10 80 -14 135 -22 192 -56
+430 -42 285 -44 299 -65 410 -26 140 -74 385 -89 455 -23 108 -24 109 -29 130
+-3 11 -11 49 -19 85 -22 99 -81 328 -128 495 -23 83 -50 179 -60 215 -36 131
+-185 588 -209 645 -5 11 -30 79 -55 150 -65 180 -190 491 -297 735 -92 210
+-341 722 -420 865 -25 44 -63 114 -85 155 -74 137 -224 392 -341 580 -105 169
+-368 568 -382 580 -4 3 -21 28 -40 55 -70 103 -416 564 -440 585 -3 3 -21 25
+-40 50 -19 25 -48 61 -65 81 -16 19 -39 46 -50 60 -38 47 -120 144 -125 149
+-3 3 -34 39 -70 80 -36 41 -69 80 -75 86 -5 6 -41 46 -80 89 -141 158 -224
+245 -460 480 -235 235 -323 319 -481 460 -43 39 -85 77 -94 85 -74 70 -559
+470 -676 557 -16 12 -82 61 -146 110 -333 250 -698 495 -1063 712 -93 56 -177
+106 -185 111 -33 20 -230 130 -295 165 -38 21 -88 48 -110 60 -51 29 -439 223
+-525 263 -36 17 -105 49 -155 72 -218 101 -612 265 -831 345 -55 20 -121 45
+-149 55 -387 147 -1140 365 -1565 455 -8 2 -80 17 -160 34 -137 29 -335 68
+-390 77 -65 11 -132 22 -167 30 -16 3 -71 7 -123 9 -81 3 -106 0 -168 -21z
+m6154 -12093 c-3 -4 -31 -28 -63 -52 -32 -24 -63 -48 -70 -54 -6 -5 -37 -32
+-70 -60 -64 -55 -296 -284 -358 -355 -370 -420 -650 -960 -809 -1560 -33 -124
+-82 -363 -96 -470 -6 -47 -13 -98 -16 -115 -21 -150 -29 -305 -28 -570 0 -237
+6 -380 19 -465 2 -14 6 -45 9 -70 13 -107 17 -138 27 -195 5 -33 14 -80 19
+-105 5 -25 12 -56 14 -70 10 -57 70 -283 103 -385 52 -160 152 -403 180 -436
+7 -8 13 -19 13 -23 0 -9 71 -131 93 -161 14 -19 16 -18 63 20 202 164 443 401
+569 560 22 28 43 52 46 55 3 3 38 54 78 115 75 114 164 288 199 390 45 131 50
+153 77 299 7 43 15 80 17 81 6 6 199 -77 322 -137 227 -113 420 -231 615 -378
+148 -112 197 -156 352 -310 109 -108 170 -178 301 -341 129 -160 303 -463 428
+-744 139 -312 263 -809 306 -1220 2 -27 7 -68 9 -90 25 -224 25 -803 0 -956
+-2 -13 -7 -51 -10 -84 -8 -67 -9 -70 -25 -175 -47 -301 -158 -678 -286 -970
+-40 -91 -181 -367 -204 -400 -11 -16 -20 -31 -20 -34 0 -5 -72 -122 -88 -141
+-4 -5 -18 -27 -31 -48 -13 -21 -28 -43 -35 -50 -6 -6 -19 -24 -29 -39 -26 -42
+-162 -215 -226 -287 -114 -131 -333 -344 -459 -446 -7 -5 -18 -14 -25 -20
+-124 -102 -358 -261 -517 -352 -95 -54 -352 -183 -364 -183 -3 0 -29 -11 -58
+-24 -49 -22 -176 -70 -288 -109 -147 -51 -431 -123 -560 -142 -24 -4 -47 -8
+-51 -10 -3 -2 -28 -7 -56 -10 -27 -3 -60 -7 -72 -10 -112 -21 -382 -39 -601
+-39 -150 0 -358 10 -410 18 -14 3 -54 7 -90 11 -36 3 -74 8 -85 11 -11 2 -36
+7 -55 9 -61 7 -202 35 -305 60 -55 14 -110 28 -122 30 -55 13 -337 108 -423
+143 -403 165 -716 352 -1045 622 -185 152 -388 355 -525 525 -36 44 -67 82
+-70 85 -3 3 -31 39 -62 81 -257 339 -472 754 -613 1184 -42 126 -99 329 -109
+390 -3 17 -8 41 -11 55 -11 47 -36 175 -39 200 -48 321 -51 372 -51 750 1 290
+8 498 19 570 3 14 7 61 11 104 10 124 23 225 61 456 20 123 19 117 44 240 12
+58 23 114 26 125 2 11 20 85 40 165 19 80 37 152 39 160 17 81 130 438 194
+615 73 202 224 567 270 652 5 10 46 91 91 181 74 151 166 320 253 467 20 33
+50 86 69 118 18 31 36 57 40 57 5 0 8 4 8 9 0 18 297 453 370 545 6 6 58 72
+117 147 91 114 173 213 218 263 6 6 44 49 85 96 78 88 461 476 540 545 25 22
+95 83 155 135 61 52 112 97 115 100 3 3 37 30 75 60 39 30 72 57 75 61 11 13
+291 218 375 274 50 33 92 62 95 65 9 9 115 77 231 148 412 252 854 464 1289
+619 244 87 348 119 605 188 88 23 161 43 163 44 2 0 1 -3 -2 -8z"/>
+</g>
+</svg>

public/static/manifest.json

@@ -1,14 +1,20 @@
 {
   "name": "Saunatime",
-  "icons": [
-    {
-      "src": "/static/webapp-icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
+  "short_name": "Saunatime",
   "start_url": "/",
   "display": "standalone",
   "theme_color": "#C0392B",
-  "background_color": "#FFFFFF"
+  "background_color": "#FFFFFF",
+  "icons": [
+    {
+      "src": "/static/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
 }