feat: replace favicon for rainbow icon

Author: fdoflorenzano

src/components/Head.js

@@ -52,7 +52,6 @@ const Head = ({ title, description, image }) => {
       <title>{title}</title>
       <meta name="description" content={description ?? defaultDescription} />
 
-      <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
       <link
         rel="apple-touch-icon"
         sizes="180x180"
@@ -71,6 +70,10 @@ const Head = ({ title, description, image }) => {
         href="/favicon-16x16.png"
       />
       <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+      <meta name="msapplication-TileColor" content="#00aba9" />
+      <meta name="theme-color" content="#ffffff" />
+      <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
       <link rel="icon" href="/favicon.ico" sizes="any" />
 
       <meta property="og:type" content="website" />

static/android-chrome-192x192.png

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

static/android-chrome-512x512.png

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