Add WatchLink app icon

src/app/globals.css

@@ -80,8 +80,12 @@ select {
   height: 34px;
   place-items: center;
   border-radius: 8px;
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  color: var(--accent);
+  background: #05070a;
+  background-image: url("/watchlink-icon-64.png");
+  background-position: center;
+  background-size: cover;
+  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
+  overflow: hidden;
 }
 
 .nav-list {

src/app/layout.tsx

@@ -3,7 +3,15 @@ import "./globals.css";
 
 export const metadata: Metadata = {
   title: "WatchLink",
-  description: "Persistent shared watch rooms for friends and teams."
+  description: "Persistent shared watch rooms for friends and teams.",
+  icons: {
+    icon: [
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/watchlink-icon.png", sizes: "512x512", type: "image/png" }
+    ],
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }]
+  }
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

src/components/app-shell.tsx

@@ -28,7 +28,7 @@ export function AppShell({
     <div className="app-shell">
       <aside className="sidebar">
         <Link className="brand" href="/dashboard">
-          <span className="brand-mark">WL</span>
+          <span className="brand-mark" aria-hidden="true" />
           <span>WatchLink</span>
         </Link>
         <nav className="nav-list" aria-label="Primary">