diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..1f832a1
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16.png b/public/favicon-16.png
new file mode 100644
index 0000000..908fd72
Binary files /dev/null and b/public/favicon-16.png differ
diff --git a/public/favicon-32.png b/public/favicon-32.png
new file mode 100644
index 0000000..c2b2227
Binary files /dev/null and b/public/favicon-32.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..8dbf639
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/app/convert/page.tsx b/src/app/convert/page.tsx
index 8882e5c..625de5b 100644
--- a/src/app/convert/page.tsx
+++ b/src/app/convert/page.tsx
@@ -48,9 +48,7 @@ export default function ConvertPage() {
       {/* Header */}
       <header className="sticky top-0 z-50 flex items-center justify-between px-6 py-4 bg-bg-cream/80 backdrop-blur-xl border-b border-border-soft">
         <Link href="/" className="flex items-center gap-2.5 no-underline">
-          <div className="w-8 h-8 rounded-[10px] bg-pink flex items-center justify-center text-white font-serif font-black text-sm">
-            T
-          </div>
+          <img src="/logo.png" alt="Transmute" className="w-8 h-8 rounded-[10px]" />
           <span className="font-serif font-extrabold text-xl tracking-tight text-text-dark">Transmute</span>
         </Link>
         <span className="font-mono text-[11px] text-text-light px-2.5 py-1 border border-border-soft rounded-full tracking-wide">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2cd88af..5e25cd8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -36,6 +36,13 @@ export const metadata: Metadata = {
     "online converter",
     "browser converter",
   ],
+  icons: {
+    icon: [
+      { url: "/favicon-32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon-16.png", sizes: "16x16", type: "image/png" },
+    ],
+    apple: "/apple-touch-icon.png",
+  },
 };
 
 export default function RootLayout({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4c4785e..d6ff374 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -84,9 +84,7 @@ export default function LandingPage() {
       {/* ──── NAV ──── */}
       <header className="sticky top-0 z-50 flex items-center justify-between px-6 py-4 bg-bg-cream/80 backdrop-blur-xl border-b border-border-soft">
         <Link href="/" className="flex items-center gap-2.5 no-underline">
-          <div className="w-8 h-8 rounded-[10px] bg-pink flex items-center justify-center text-white font-serif font-black text-sm">
-            T
-          </div>
+          <img src="/logo.png" alt="Transmute" className="w-8 h-8 rounded-[10px]" />
           <span className="font-serif font-extrabold text-xl tracking-tight text-text-dark">Transmute</span>
         </Link>
         <Link