Update app icon for various platforms (#508)

The icons and config were generated with the help of
https://realfavicongenerator.net/.

Fixes #503

dist/package.sh

@@ -91,8 +91,8 @@ done
 echo "+ Update version number..."
 # Note: The `-i.bak` notation is requires so that the sed command works both on Linux
 # and on macOS: https://stackoverflow.com/q/5694228/284318
-sed -i.bak -e "s/\[\[VERSION\]\]/${VERSION}/g" $DIR/index.html $DIR/troubleshoot/index.html $DIR/dist/app.js $DIR/version.txt
-rm $DIR/index.html.bak $DIR/troubleshoot/index.html.bak $DIR/dist/app.js.bak $DIR/version.txt.bak
+sed -i.bak -e "s/\[\[VERSION\]\]/${VERSION}/g" $DIR/index.html $DIR/troubleshoot/index.html $DIR/dist/app.js $DIR/manifest.webmanifest $DIR/browserconfig.xml $DIR/version.txt
+rm $DIR/index.html.bak $DIR/troubleshoot/index.html.bak $DIR/dist/app.js.bak $DIR/manifest.webmanifest.bak $DIR/browserconfig.xml.bak $DIR/version.txt.bak
 
 echo "+ Update permissions..."
 find $DIR/ -type f -exec chmod 644 {} \;

index.html

@@ -29,12 +29,16 @@
     <meta name="description" translate translate-attr-content="meta.DESCRIPTION"
           content="Chat from your desktop with Threema Web and have full access to all chats, contacts and media files."/>
 
-    <!-- Webmanifest -->
-    <link rel="manifest" href="manifest.webmanifest">
-
-    <!-- Favicon -->
-    <link rel="icon" href="img/favicon.ico?v=[[VERSION]]" type="image/x-icon"/>
-    <link rel="shortcut icon" href="img/favicon.ico?v=[[VERSION]]" type="image/x-icon"/>
+    <!-- Favicon / Webmanifest / Browserconfig -->
+    <link rel="manifest" href="manifest.webmanifest?v=[[VERSION]]">
+    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png?v=[[VERSION]]">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png?v=[[VERSION]]">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png?v=[[VERSION]]">
+    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg?v=[[VERSION]]" color="#5bbad5">
+    <link rel="shortcut icon" href="img/favicon/favicon.ico?v=[[VERSION]]">
+    <meta name="msapplication-TileColor" content="#313131">
+    <meta name="msapplication-config" content="browserconfig.xml?v=[[VERSION]]">
+    <meta name="theme-color" content="#4f4f4f">
 
     <!-- Angular -->
     <link rel="stylesheet" href="node_modules/angular/angular-csp.css?v=[[VERSION]]">

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="img/favicon/mstile-150x150.png?v=[[VERSION]]"/>
+            <TileColor>#313131</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/img/favicon/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="682.667" height="682.667" viewBox="0 0 512.000000 512.000000"><path d="M67 1.9C33.9 8.9 8.8 34.2 1.9 67.4.1 76.1 0 84.5 0 255.6 0 451-.2 442.3 5.6 457.9c9.9 26.2 33.8 46.4 61.9 52.2 8.6 1.8 17.5 1.9 188.1 1.9 158.6 0 180.1-.2 187.4-1.6 17.6-3.3 31.1-10.4 43.5-22.8 13.1-13.1 20-25.7 23.6-43.1 1.8-8.6 1.9-17.5 1.9-188.5 0-171.5-.1-179.9-1.9-188.6C503.2 34 478 8.8 444.6 1.9 435.9.1 427.6 0 255.5.1 86.2.1 75 .2 67 1.9zm224 75.5c69.8 12.1 121.4 52 136.3 105.4 1.8 6.6 2.1 10.4 2.1 26.2 0 17.3-.2 19.1-2.7 27.5-16.1 53.5-69.6 93.3-139.2 103.6-19.8 2.9-46.7 2.9-66.5-.1-17.1-2.6-33.3-2.8-44-.6-4.1.9-23.7 6.7-43.5 13-19.8 6.2-36.2 11.2-36.4 11-.2-.1 5.4-11.2 12.5-24.5 12.7-24 12.8-24.4 12.8-30.9 0-8.3-1.9-11.9-11.9-23-21-23.3-31.5-48.6-31.5-76 0-29.1 11.2-55.5 33.4-78.8 27.6-29 69.1-48.4 115.6-54.1 11.6-1.5 51.8-.6 63 1.3zM165 395.1c18 8.1 21.7 32 7 45.2-5.7 5.3-10.3 7-18.1 7.1-15.7.1-27.3-11.6-27.2-27.4 0-7.7 1.7-12.2 7-18 7.7-8.6 21-11.6 31.3-6.9zm101.5.3c5.7 2.6 11.7 8.7 14.1 14.3 2.3 5.5 2.2 15.8-.3 21.4-7.7 17.4-30.7 21.8-44.3 8.6-10.7-10.4-10.6-29.2.1-39.4 7.9-7.5 20.6-9.5 30.4-4.9zm101.9.1c9.6 4.6 15.1 13.8 15 25-.1 15.3-11.7 26.9-26.8 26.9-14.8-.1-26.2-10.5-27.4-25-.9-11.6 4.8-21.8 15.1-26.8 4.4-2.3 6.3-2.6 12.7-2.3 4.8.2 8.9 1 11.4 2.2z"/><path d="M237.7 127.1c-13.5 4.6-23.1 14.2-27.9 27.8-1.6 4.6-2.1 9.3-2.5 26.3-.6 19.6-.7 20.8-2.5 20.8-3.2 0-7.7 2.9-9.3 6-1.4 2.6-1.5 7.8-1.3 36.5.3 33.3.3 33.5 2.6 35.7l2.3 2.3 52.2.3c35.2.2 53.4 0 55.9-.8 2-.6 4.6-2.2 5.7-3.7 2-2.5 2.1-3.8 2.1-34.8 0-31.9 0-32.2-2.3-35.6-1.5-2.2-3.8-3.9-6.5-4.9l-4.2-1.4V184c0-19-1.2-26.5-5.4-34.8-5.3-10.4-15.3-18.8-26.7-22.3-8.5-2.7-24.2-2.6-32.2.2zm29.5 20.3c5.1 2.5 9.6 7.2 12.2 12.6 1.8 4 2.1 6.7 2.4 23.2l.4 18.8H228v-19.4c0-21 .5-23.4 5.7-29.6 1.5-1.8 5-4.4 7.8-5.7 4.3-2 6.2-2.3 13.5-2.1 5.7.2 9.7 1 12.2 2.2z"/></svg>

public/manifest.webmanifest

@@ -1,20 +1,26 @@
 {
-  "background_color": "rgb(117,117,117)",
   "description": "Chat from your desktop with Threema Web and have full access to all chats, contacts and media files.",
   "display": "standalone",
   "icons": [
     {
-      "src": "img/favicon.ico",
+      "src": "img/favicon/favicon.ico?v=[[VERSION]]",
       "sizes": "64x64",
       "type": "image/x-icon"
     },
     {
-      "src": "img/threema-576x576.png",
-      "sizes": "576x576",
+      "src": "img/favicon/android-chrome-192x192.png?v=[[VERSION]]",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/favicon/android-chrome-512x512.png?v=[[VERSION]]",
+      "sizes": "512x512",
       "type": "image/png"
     }
   ],
   "name": "Threema Web",
   "short_name": "Threema Web",
-  "start_url": "."
+  "start_url": ".",
+  "background_color": "rgb(117,117,117)",
+  "theme_color": "rgb(117,117,117)"
 }

troubleshoot/index.html

@@ -29,8 +29,8 @@
     <title>Threema Web Diagnostics</title>
 
     <!-- Favicon -->
-    <link rel="icon" href="../img/favicon.ico?v=[[VERSION]]" type="image/x-icon"/>
-    <link rel="shortcut icon" href="../img/favicon.ico?v=[[VERSION]]" type="image/x-icon"/>
+    <link rel="icon" href="../img/favicion/favicon.ico?v=[[VERSION]]" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../img/favicion/favicon.ico?v=[[VERSION]]" type="image/x-icon"/>
 
     <!-- Fonts -->
     <link rel="stylesheet" href="../fonts/roboto.css?v=[[VERSION]]" type="text/css">