diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..bfe93a0
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
new file mode 100644
index 0000000..9f48add
Binary files /dev/null and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
new file mode 100644
index 0000000..63bdc06
Binary files /dev/null and b/public/favicon-32x32.png differ
diff --git a/public/watchlink-icon-64.png b/public/watchlink-icon-64.png
new file mode 100644
index 0000000..b53ebfc
Binary files /dev/null and b/public/watchlink-icon-64.png differ
diff --git a/public/watchlink-icon.png b/public/watchlink-icon.png
new file mode 100644
index 0000000..397511b
Binary files /dev/null and b/public/watchlink-icon.png differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 8edf11c..f081c1e 100644
--- a/src/app/globals.css
+++ b/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 {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 073cf04..9c30bf1 100644
--- a/src/app/layout.tsx
+++ b/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 }) {
diff --git a/src/components/app-shell.tsx b/src/components/app-shell.tsx
index 809b393..5bda95b 100644
--- a/src/components/app-shell.tsx
+++ b/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">