White background favicons-2 (#860)

* New favicons

* Add references to new image paths

frontend/public/img/icons/safari-pinned-tab.svg

@@ -1,3 +1,28 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" version="1.1">
-	<path d="M 162.083 54.642 C 148.745 68.272, 137.170 80.703, 136.362 82.266 C 133.689 87.435, 133.522 94.130, 135.929 99.573 C 137.122 102.269, 139.070 105.510, 140.258 106.775 L 142.418 109.074 90.974 160.526 L 39.529 211.979 46.999 219.499 L 54.470 227.020 91.235 190.265 L 128 153.510 164.765 190.265 L 201.530 227.020 209 219.500 L 216.470 211.980 179.725 175.225 L 142.980 138.470 150.320 131.178 C 156.858 124.685, 157.808 124.063, 159.001 125.501 C 162.066 129.195, 168.873 132.163, 174.392 132.213 C 183.508 132.295, 186.374 130.174, 212.477 104.038 L 236.454 80.030 231.501 75.001 L 226.548 69.973 209.288 87.212 L 192.027 104.452 187 99.500 L 181.973 94.548 199.212 77.288 L 216.452 60.027 211.500 55 L 206.548 49.973 189.288 67.212 L 172.027 84.452 167 79.500 L 161.973 74.548 179.225 57.275 L 196.477 40.001 191.406 34.930 L 186.335 29.859 162.083 54.642 M 38.429 41.250 C 31.557 49.376, 28.011 62.815, 29.835 73.824 C 31.955 86.615, 34.508 90.093, 61.720 117.253 L 86.520 142.005 101.501 126.999 L 116.482 111.993 79.496 74.996 C 59.154 54.648, 42.210 38, 41.844 38 C 41.478 38, 39.941 39.462, 38.429 41.250" stroke="none" fill="black" fill-rule="evenodd"/>
-</svg>
+<?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.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4948 6348 c-662 -677 -956 -982 -1123 -1168 -32 -36 -62 -67 -65
+-70 -3 -3 -31 -35 -62 -71 -127 -151 -157 -391 -77 -600 26 -68 117 -233 137
+-249 4 -3 25 -25 47 -48 l40 -42 -1679 -1679 -1678 -1678 244 -246 243 -247
+1200 1200 1199 1199 1192 -1192 c656 -655 1197 -1193 1202 -1195 10 -3 473
+459 480 478 2 5 -534 547 -1191 1204 l-1194 1195 185 183 c250 248 262 258
+296 258 11 0 41 -19 66 -43 139 -131 331 -199 538 -190 160 6 273 63 475 236
+132 114 199 179 845 822 l642 640 -161 163 c-88 90 -162 162 -164 160 -3 -1
+-256 -254 -564 -561 l-560 -559 -160 158 c-89 87 -161 162 -161 165 0 4 251
+259 559 567 l558 560 -159 161 c-87 89 -161 161 -164 161 -3 0 -258 -252 -566
+-559 l-560 -560 -164 162 -164 162 560 560 c308 308 560 563 560 566 0 5 -194
+202 -292 297 l-34 32 -326 -332z"/>
+<path d="M489 6349 c-108 -115 -190 -257 -254 -440 -20 -57 -35 -104 -34 -104
+1 0 -3 -22 -9 -50 -42 -181 -46 -400 -11 -568 72 -343 178 -493 781 -1102 199
+-202 1018 -1020 1054 -1055 6 -5 974 962 974 973 0 9 -1704 1713 -2130 2130
+-156 152 -291 277 -299 277 -9 0 -41 -27 -72 -61z"/>
+</g>
+</svg>

frontend/public/manifest.json

@@ -3,77 +3,29 @@
   "short_name": "Mealie",
   "icons": [
     {
-      "src": "./img/icons/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
+        "src": "./img/icons/android-chrome-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png",
+        "purpose": "any"
     },
     {
-      "src": "./img/icons/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
+        "src": "./img/icons/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png",
+        "purpose": "any"
     },
     {
       "src": "./img/icons/android-chrome-maskable-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
-    },
-    {
+  },
+  {
       "src": "./img/icons/android-chrome-maskable-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
-    },
-    {
-      "src": "./img/icons/apple-touch-icon-60x60.png",
-      "sizes": "60x60",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/apple-touch-icon-76x76.png",
-      "sizes": "76x76",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/apple-touch-icon-120x120.png",
-      "sizes": "120x120",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/apple-touch-icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/apple-touch-icon-180x180.png",
-      "sizes": "180x180",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/apple-touch-icon.png",
-      "sizes": "180x180",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/favicon-16x16.png",
-      "sizes": "16x16",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/favicon-32x32.png",
-      "sizes": "32x32",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/msapplication-icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "./img/icons/mstile-150x150.png",
-      "sizes": "150x150",
-      "type": "image/png"
-    }
+  }
   ],
   "start_url": ".",
   "display": "standalone",

frontend/vue.config.js

@@ -36,11 +36,19 @@ module.exports = {
   pwa: {
     name: manifestJSON.short_name,
     themeColor: manifestJSON.theme_color,
-    msTileColor: manifestJSON.background_color,
+    msTileColor: manifestJSON.theme_color,
     appleMobileWebAppCapable: "yes",
     appleMobileWebAppStatusBarStyle: "black",
     manifestCrossorigin: "use-credentials",
 
+    iconPaths: {
+      maskicon: "img/icons/safari-pinned-tab.svg",
+      favicon32: "img/icons/favicon-32x32.png",
+      favicon16: "img/icons/favicon-16x16.png",
+      appleTouchIcon: "img/icons/apple-touch-icon.png",
+      msTileImage: "img/icons/mstile-150x150.png",
+    },
+
     workboxPluginMode: "InjectManifest",
     workboxOptions: {
       swSrc: "./src/sw.js",