Use contributed icon

angular.json

@@ -29,6 +29,11 @@
                 "input": "src/json",
                 "output": "/strings"
               },
+              {
+                "glob": "*.*",
+                "input": "src/favicons",
+                "output": "favicons"
+              },
               "src/.htaccess",
               "src/images",
               "src/fonts"

src/favicons/browserconfig.xml

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

src/favicons/safari-pinned-tab.svg

@@ -0,0 +1,46 @@
+<?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="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3305 6913 c-260 -21 -434 -48 -637 -98 -784 -197 -1471 -666 -1952
+-1335 -155 -215 -332 -550 -424 -800 -147 -401 -206 -745 -206 -1195 0 -283
+11 -399 64 -665 259 -1298 1237 -2321 2525 -2639 297 -74 482 -95 825 -95 301
+0 419 11 680 64 892 179 1680 714 2183 1480 286 436 460 915 534 1466 21 160
+24 626 4 779 -89 704 -353 1317 -793 1840 -103 122 -339 351 -473 458 -537
+430 -1199 687 -1895 737 -135 9 -342 11 -435 3z m320 -2624 c57 -16 104 -55
+127 -106 17 -38 19 -62 16 -168 -3 -118 -4 -125 -33 -166 -16 -23 -50 -53 -74
+-66 -39 -20 -58 -23 -164 -23 -144 0 -191 17 -235 83 -25 38 -27 49 -30 165
+-3 97 0 134 12 167 21 54 62 93 117 110 53 17 209 19 264 4z m-854 -31 c27
+-16 54 -43 69 -70 23 -39 25 -53 25 -168 0 -140 -8 -164 -71 -219 -52 -46 -72
+-51 -202 -51 -133 0 -179 15 -225 69 -38 46 -50 101 -45 221 3 89 7 112 28
+149 44 80 103 101 266 97 98 -2 116 -5 155 -28z m1820 0 c70 -41 93 -91 97
+-213 5 -123 -8 -173 -56 -227 -53 -59 -82 -68 -219 -68 -93 0 -127 4 -158 19
+-89 40 -121 120 -113 282 4 109 29 166 86 201 51 32 86 37 208 34 98 -2 116
+-5 155 -28z m-923 -729 c26 -13 54 -38 70 -62 25 -37 27 -50 30 -160 4 -143
+-9 -189 -70 -241 -52 -45 -116 -60 -232 -54 -134 7 -200 47 -227 137 -6 21 -9
+88 -7 157 3 111 5 124 30 161 44 67 90 83 237 83 107 0 131 -3 169 -21z m-8
+-781 c24 -13 58 -40 74 -61 l31 -39 0 -142 c0 -138 -1 -144 -27 -183 -17 -26
+-45 -50 -79 -67 -48 -23 -64 -26 -163 -26 -123 0 -169 14 -218 66 -41 44 -48
+75 -48 204 0 129 7 160 48 204 49 52 94 66 222 66 101 0 122 -3 160 -22z"/>
+<path d="M3595 4100 c-49 -49 -94 -90 -99 -90 -6 0 -29 19 -53 42 -36 35 -44
+39 -58 28 -27 -23 -16 -47 48 -103 l63 -55 112 105 c62 57 112 112 112 122 0
+16 -18 41 -30 41 -3 0 -46 -40 -95 -90z"/>
+<path d="M2683 4088 l-93 -92 -38 37 c-41 40 -62 46 -83 21 -11 -13 -3 -25 54
+-82 l67 -67 117 118 c101 100 116 120 107 135 -6 9 -17 18 -25 20 -8 1 -56
+-39 -106 -90z"/>
+<path d="M4503 4088 l-93 -92 -38 37 c-41 40 -62 46 -83 21 -11 -13 -3 -25 54
+-82 l67 -67 117 118 c101 100 116 120 107 135 -6 9 -17 18 -25 20 -8 1 -56
+-39 -106 -90z"/>
+<path d="M3585 3350 l-89 -90 -42 41 c-44 43 -76 49 -82 15 -4 -19 102 -136
+123 -136 6 0 59 49 119 109 109 109 127 142 81 149 -14 2 -48 -25 -110 -88z"/>
+<path d="M3585 2570 l-89 -90 -42 41 c-43 42 -68 46 -81 13 -4 -11 14 -36 58
+-80 l64 -64 113 112 c79 80 112 119 110 133 -6 44 -41 27 -133 -65z"/>
+</g>
+</svg>

src/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "TaskBoard",
+    "short_name": "TaskBoard",
+    "icons": [
+        {
+            "src": "/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/index.html

@@ -12,7 +12,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="author" content="Matthew Ross">
 
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
+  <link rel="manifest" href="favicons/site.webmanifest">
+  <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#2d8097">
+  <link rel="shortcut icon" href="favicons/favicon.ico">
+  <meta name="apple-mobile-web-app-title" content="TaskBoard">
+  <meta name="application-name" content="TaskBoard">
+  <meta name="msapplication-TileColor" content="#e6e6e6">
+  <meta name="msapplication-config" content="favicons/browserconfig.xml">
+  <meta name="theme-color" content="#ffffff">
 </head>
 <body>
   <tb-app-component>