Use wheel favicon.

frontend/app/components/Layout.tsx

@@ -142,7 +142,15 @@ export default function Layout({ children, loading = false }: LayoutProps) {
               gap: 1,
             }}
           >
-            ⚓ Captain's Log
+            <img
+              src="/compass.svg"
+              alt="Captain's Log"
+              style={{
+                width: 32,
+                height: 32,
+              }}
+            />
+            Captain's Log
           </Typography>
 
           <Button

frontend/app/root.tsx

@@ -25,6 +25,22 @@ export const links: Route.LinksFunction = () => [
     rel: 'stylesheet',
     href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
   },
+  // Favicon links
+  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+  {
+    rel: 'icon',
+    type: 'image/png',
+    sizes: '16x16',
+    href: '/favicon-16x16.png',
+  },
+  {
+    rel: 'icon',
+    type: 'image/png',
+    sizes: '32x32',
+    href: '/favicon-32x32.png',
+  },
+  { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+  { rel: 'manifest', href: '/site.webmanifest' },
 ]
 
 export function Layout({ children }: { children: React.ReactNode }) {