Update favicons to match the new branding

public/favicon/README.md

@@ -0,0 +1,23 @@
+# Your Favicon Package
+
+This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
+
+## Install instructions
+
+To install this package:
+
+Extract this package in <code>&lt;web site&gt;/public/favicon/</code>. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/public/favicon/favicon.ico</code>.
+
+Insert the following code in the `head` section of your pages:
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-touch-icon.png?v=2">
+    <link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png?v=2">
+    <link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png?v=2">
+    <link rel="manifest" href="/public/favicon/site.webmanifest?v=2">
+    <link rel="mask-icon" href="/public/favicon/safari-pinned-tab.svg?v=2" color="#9e1cf3">
+    <link rel="shortcut icon" href="/public/favicon/favicon.ico?v=2">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="msapplication-config" content="/public/favicon/browserconfig.xml?v=2">
+    <meta name="theme-color" content="#000000">
+
+*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

public/favicon/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#0c0c0c</TileColor>
+            <square150x150logo src="/public/favicon/mstile-150x150.png?v=2"/>
+            <TileColor>#000000</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

public/favicon/html_code.html

@@ -0,0 +1,9 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-touch-icon.png?v=2">
+<link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png?v=2">
+<link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png?v=2">
+<link rel="manifest" href="/public/favicon/site.webmanifest?v=2">
+<link rel="mask-icon" href="/public/favicon/safari-pinned-tab.svg?v=2" color="#9e1cf3">
+<link rel="shortcut icon" href="/public/favicon/favicon.ico?v=2">
+<meta name="msapplication-TileColor" content="#000000">
+<meta name="msapplication-config" content="/public/favicon/browserconfig.xml?v=2">
+<meta name="theme-color" content="#000000">

public/favicon/site.webmanifest

@@ -1,19 +1,19 @@
 {
-    "name": "Carberra Tutorials",
-    "short_name": "Carberra Tutorials",
+    "name": "Carberra",
+    "short_name": "Carberra",
     "icons": [
         {
-            "src": "/android-chrome-192x192.png",
+            "src": "/public/favicon/android-chrome-192x192.png?v=2",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "/android-chrome-512x512.png",
+            "src": "/public/favicon/android-chrome-512x512.png?v=2",
             "sizes": "512x512",
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
+    "theme_color": "#000000",
+    "background_color": "#000000",
     "display": "standalone"
 }

src/utils/meta.tsx

@@ -42,24 +42,24 @@ const Meta: React.FC<Props> = (props) => {
       <link
         rel="apple-touch-icon"
         sizes="180x180"
-        href="/favicon/apple-touch-icon.png"
+        href="/favicon/apple-touch-icon.png?v=2"
       />
       <link
         rel="icon"
         type="image/png"
         sizes="32x32"
-        href="/favicon/favicon-32x32.png"
+        href="/favicon/favicon-32x32.png?v=2"
       />
       <link
         rel="icon"
         type="image/png"
         sizes="16x16"
-        href="/favicon/favicon-16x16.png"
+        href="/favicon/favicon-16x16.png?v=2"
       />
       <link rel="manifest" href="/favicon/site.webmanifest" />
       <link
         rel="mask-icon"
-        href="/favicon/safari-pinned-tab.svg"
+        href="/favicon/safari-pinned-tab.svg?v=2"
         color="#0c0c0c"
       />
       <meta name="apple-mobile-web-app-title" content="Carberra" />