Apply LogoPack website branding

public/site.webmanifest

@@ -3,19 +3,13 @@
   "short_name": "CouchMode",
   "description": "Turn your Windows PC into a couch gaming setup with controller-triggered free mode and Pro automation.",
   "start_url": "/",
-  "display": "standalone",
-  "background_color": "#0f1220",
-  "theme_color": "#0f1220",
   "icons": [
-    {
-      "src": "/icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ]
+    { "src": "favicon-16.png", "sizes": "16x16", "type": "image/png" },
+    { "src": "favicon-32.png", "sizes": "32x32", "type": "image/png" },
+    { "src": "apple-touch-icon.png", "sizes": "180x180", "type": "image/png" },
+    { "src": "favicon.svg", "type": "image/svg+xml", "sizes": "any" }
+  ],
+  "theme_color": "#0C0E16",
+  "background_color": "#0C0E16",
+  "display": "standalone"
 }

src/components/landing/Footer.tsx

@@ -3,13 +3,14 @@ export function Footer() {
     <footer className="relative border-t border-border py-12 mt-12">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
-          <div className="flex items-center gap-2">
-            <span className="grid place-items-center h-7 w-7 rounded-lg bg-aurora">
-              <span className="h-2.5 w-2.5 rounded-sm bg-background" />
-            </span>
-            <span className="font-display font-semibold tracking-tight">
-              CouchMode
-            </span>
+          <div className="flex items-center">
+            <img
+              src="/brand/logo-lockup-dark.svg"
+              alt="CouchMode"
+              width={115}
+              height={28}
+              className="h-7 w-auto"
+            />
           </div>
 
           <nav className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">

src/components/landing/Navbar.tsx

@@ -24,13 +24,14 @@ export function Navbar() {
     >
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between py-2">
-          <a href="#" className="flex items-center gap-2 group">
-            <span className="grid place-items-center h-8 w-8 rounded-lg bg-aurora glow-violet">
-              <span className="h-3 w-3 rounded-sm bg-background" />
-            </span>
-            <span className="font-display font-semibold text-lg tracking-tight">
-              CouchMode
-            </span>
+          <a href="#" className="flex items-center group" aria-label="CouchMode home">
+            <img
+              src="/brand/logo-lockup-dark.svg"
+              alt="CouchMode"
+              width={131}
+              height={32}
+              className="h-8 w-auto"
+            />
           </a>
 
           <nav className="hidden md:flex items-center gap-8">

src/routes/__root.tsx

@@ -80,6 +80,11 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
         rel: "stylesheet",
         href: appCss,
       },
+      { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
+      { rel: "icon", href: "/favicon-32.png", sizes: "32x32", type: "image/png" },
+      { rel: "icon", href: "/favicon-16.png", sizes: "16x16", type: "image/png" },
+      { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" },
+      { rel: "manifest", href: "/site.webmanifest" },
       { rel: "preconnect", href: "https://fonts.googleapis.com" },
       { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
       {

src/routes/index.tsx

@@ -72,7 +72,7 @@ export const Route = createFileRoute("/")({
           "@type": "Brand",
           name: "CouchMode",
           url: "https://couchmode.app/",
-          logo: "https://couchmode.app/icon-512.png",
+          logo: "https://couchmode.app/apple-touch-icon.png",
         },
       },
     ],