Convert static assets to use WebP

Signed-off-by: Harsh Shandilya <msfjarvis@gmail.com>

static/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
+            <square150x150logo src="/mstile-150x150.webp"/>
             <TileColor>#2b5797</TileColor>
         </tile>
     </msapplication>

static/site.webmanifest

@@ -8,19 +8,19 @@
   "theme_color": "#a9a9b3",
   "icons": [
     {
-      "src": "favicon-16x16.png",
+      "src": "favicon-16x16.webp",
       "sizes": "16x16",
-      "type": "image/png"
+      "type": "image/webp"
     },
     {
-      "src": "favicon-32x32.png",
+      "src": "favicon-32x32.webp",
       "sizes": "32x32",
-      "type": "image/png"
+      "type": "image/webp"
     },
     {
-      "src": "android-chrome-192x192.png",
+      "src": "android-chrome-192x192.webp",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/webp"
     }
   ]
 }

themes/hello-friend-ng/layouts/partials/favicons.html

@@ -1,6 +1,6 @@
-<link rel="apple-touch-icon" sizes="180x180" href="{{"apple-touch-icon.png" | relURL}}">
-<link rel="icon" type="image/png" sizes="32x32" href="{{"favicon-32x32.png" | relURL}}">
-<link rel="icon" type="image/png" sizes="16x16" href="{{"favicon-16x16.png" | relURL}}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{"apple-touch-icon.webp" | relURL}}">
+<link rel="icon" type="image/webp" sizes="32x32" href="{{"favicon-32x32.webp" | relURL}}">
+<link rel="icon" type="image/webp" sizes="16x16" href="{{"favicon-16x16.webp" | relURL}}">
 <link rel="manifest" href="{{"site.webmanifest" | relURL}}">
 <link rel="mask-icon" href="{{"safari-pinned-tab.svg" | relURL}}" color="#252627">
 <link rel="shortcut icon" href="{{"favicon.ico" | relURL}}">