higher quality / colored icons

frontend/index.html

@@ -4,11 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#000000" />
-
+    
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <meta name="apple-mobile-web-app-title" content="Komodo" />
     <link rel="manifest" href="/manifest.json" />
 
     <title>Komodo</title>

frontend/public/manifest.json

@@ -1,25 +1,21 @@
 {
-  "short_name": "Komodo",
   "name": "Komodo",
+  "short_name": "Komodo",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/komodo-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
-      "src": "logo192.png",
+      "src": "/komodo-512x512.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "purpose": "maskable"
     }
   ],
-  "start_url": ".",
-  "display": "standalone",
   "theme_color": "#ffffff",
-  "background_color": "#000000"
-}
+  "background_color": "#000000",
+  "display": "standalone"
+}

frontend/src/components/topbar.tsx

@@ -54,7 +54,7 @@ export const Topbar = () => {
           to="/"
           className="flex gap-3 items-center text-2xl tracking-widest md:mx-2"
         >
-          <img src="/monitor-circle.png" className="w-[28px] dark:invert" />
+          <img src="/greengrey-outline.svg" className="w-[32px]" />
           <div className="hidden lg:block">KOMODO</div>
         </Link>