add favicon.

apps/web/app/layout.tsx

@@ -8,6 +8,18 @@ const inter = Inter({ subsets: ['latin'] });
 export const metadata: Metadata = {
   title: 'NATS Console',
   description: 'Enterprise-grade management console for NATS JetStream',
+  icons: {
+    icon: [
+      { url: '/favicon.ico', sizes: 'any' },
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+    ],
+    apple: '/apple-touch-icon.png',
+    other: [
+      { rel: 'android-chrome-192x192', url: '/android-chrome-192x192.png' },
+      { rel: 'android-chrome-512x512', url: '/android-chrome-512x512.png' },
+    ],
+  },
 };
 
 export default function RootLayout({

apps/web/components/logo.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { cn } from '@/lib/utils';
 
 interface LogoProps {
@@ -10,21 +11,20 @@ interface LogoProps {
 
 export function Logo({ className, showText = true, size = 'md', href = '/' }: LogoProps) {
   const sizes = {
-    sm: { icon: 'h-6 w-6', text: 'text-base' },
-    md: { icon: 'h-8 w-8', text: 'text-lg' },
-    lg: { icon: 'h-10 w-10', text: 'text-xl' },
+    sm: { icon: 24, text: 'text-base' },
+    md: { icon: 32, text: 'text-lg' },
+    lg: { icon: 40, text: 'text-xl' },
   };
 
   const content = (
     <div className={cn('flex items-center gap-2', className)}>
-      <div
-        className={cn(
-          'rounded-lg bg-primary flex items-center justify-center',
-          sizes[size].icon
-        )}
-      >
-        <span className="text-primary-foreground font-bold text-sm">N</span>
-      </div>
+      <Image
+        src="/icon.svg"
+        alt="NATS Console"
+        width={sizes[size].icon}
+        height={sizes[size].icon}
+        className="rounded-lg"
+      />
       {showText && (
         <span className={cn('font-semibold', sizes[size].text)}>NATS Console</span>
       )}

apps/web/public/icon.svg

@@ -0,0 +1,18 @@
+        <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+          <defs>
+            <linearGradient id="favGrad4" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" style="stop-color:#22d3ee"/>
+              <stop offset="100%" style="stop-color:#3b82f6"/>
+            </linearGradient>
+          </defs>
+          <rect width="128" height="128" rx="28" fill="url(#favGrad4)"/>
+          <g transform="translate(64,64)">
+            <path d="M -48 -12 L -38 -12" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+            <path d="M -50 0 L -38 0" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
+            <path d="M -48 12 L -38 12" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+            <path d="M -28 32 L -28 -32 L -12 -32 L 16 14 L 16 -32 L 28 -32 L 28 32 L 12 32 L -16 -14 L -16 32 Z" fill="#ffffff"/>
+            <path d="M 38 -12 L 48 -12" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+            <path d="M 38 0 L 50 0" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
+            <path d="M 38 12 L 48 12" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
+          </g>
+        </svg>