diff --git a/app/layout.tsx b/app/layout.tsx
index 1db4ada..40eba0b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,12 +2,18 @@ import type { Metadata } from "next";
 import "./globals.css";
 import Celebration from "@/components/Celebration";
 import Nav from "@/components/Nav";
+import PageTitleManager from "@/components/PageTitleManager";
 import { ConnectionProvider } from "@/lib/connection";
 import { CHIP_DROP_SOUND_PATHS } from "@/lib/sfx";
 
 export const metadata: Metadata = {
-  title: "Connect4 Moderator",
+  title: "Connect4 RPI Minds & Machines",
   description: "Watch matches, track tournaments, and play Connect4",
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon.ico",
+    apple: "/icon.png",
+  },
 };
 
 export default function RootLayout({
@@ -30,6 +36,7 @@ export default function RootLayout({
       </head>
       <body className="min-h-screen bg-gray-950 text-gray-100">
         <ConnectionProvider>
+          <PageTitleManager />
           <Celebration />
           <Nav />
           <main className="max-w-7xl mx-auto px-4 py-6">{children}</main>
diff --git a/components/Nav.tsx b/components/Nav.tsx
index eb104cf..dbb5dcf 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -1,4 +1,5 @@
 "use client";
+import Image from "next/image";
 import Link from "next/link";
 import { SubmitEvent, useEffect, useState } from "react";
 import { Settings, X } from "lucide-react";
@@ -51,7 +52,13 @@ export default function Nav() {
             href="/"
             className="text-lg font-bold text-white flex items-center gap-2"
           >
-            <span className="text-2xl">🔴</span>
+            <Image
+              src="/icon.png"
+              alt="Connect4 Observer icon"
+              width={32}
+              height={32}
+              className="h-8 w-8 rounded-sm"
+            />
             <span>Connect4 Observer</span>
           </Link>
 
diff --git a/components/PageTitleManager.tsx b/components/PageTitleManager.tsx
new file mode 100644
index 0000000..9cf7739
--- /dev/null
+++ b/components/PageTitleManager.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect } from "react";
+import { useConnection } from "@/lib/connection";
+
+const DEFAULT_TITLE = "Connect4 RPI Minds & Machines";
+
+export default function PageTitleManager() {
+  const { role, username } = useConnection();
+
+  useEffect(() => {
+    if (role === "player" && username.trim()) {
+      document.title = `${username.trim()} - ${DEFAULT_TITLE}`;
+      return;
+    }
+
+    document.title = DEFAULT_TITLE;
+  }, [role, username]);
+
+  return null;
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..fd14e06
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000..b41c02f
Binary files /dev/null and b/public/icon.png differ
