Brand logo: 3D cube/map icon replaces the M gradient mark

- public/brand/logo.png: 117×115 transparent PNG (source)
- public/icons/icon-192.png, icon-512.png, icon-maskable-512.png: PWA icons derived from logo
- public/icons/favicon.png (64), favicon-32.png (32): favicon sizes
- icon-maskable-512: logo on #003D5B indigo background, 80% safe zone
- layout.tsx: header logo + mobile drawer logo both use the new image
- Sidebar.tsx: drawer header logo uses the new image
- metadata.icons updated to include favicon sizes
- <link rel='icon'> added for 32×32 and 64×64 favicons

app/layout.tsx

@@ -34,10 +34,14 @@ export const metadata: Metadata = {
   },
   icons: {
     icon: [
+      { url: "/icons/favicon-32.png", sizes: "32x32" },
+      { url: "/icons/icon-192.png", sizes: "192x192" },
+      { url: "/icons/icon-512.png", sizes: "512x512" },
+    ],
+    apple: [
       { url: "/icons/icon-192.png", sizes: "192x192" },
       { url: "/icons/icon-512.png", sizes: "512x512" },
     ],
-    apple: [{ url: "/icons/icon-192.png", sizes: "192x192" }],
   },
 };
 
@@ -73,6 +77,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
             Without this tag, iOS Add-to-Home-Screen opens in Safari instead of standalone. */}
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-title" content="Mega Plant" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
+        <link rel="icon" type="image/png" sizes="64x64" href="/icons/favicon.png" />
         <link rel="apple-touch-icon" href="/icons/icon-192.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
       </head>
@@ -81,9 +87,11 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           <header className="sticky top-0 z-30 h-16 bg-white/80 dark:bg-[#0b1014]/80 backdrop-blur border-b border-gray-200 dark:border-white/5">
             <div className="flex items-center gap-3 sm:gap-6 px-4 sm:px-6 h-full">
               <Link href="/" className="flex items-center gap-2 shrink-0">
-                <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-[#EDAE49] to-[#D1495B] flex items-center justify-center shadow-lg shadow-orange-500/20">
-                  <span className="font-black text-white text-sm">M</span>
-                </div>
+                <img
+                  src="/brand/logo.png"
+                  alt="Mega Plant"
+                  className="w-9 h-9 rounded-xl object-contain bg-white dark:bg-[#0b1014] shadow-sm"
+                />
                 <div className="leading-tight hidden sm:block">
                   <div className="text-sm font-semibold text-[#003D5B] dark:text-white">Mega Plant</div>
                   <div className="text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wider">Overheads 2026</div>

components/Sidebar.tsx

@@ -82,9 +82,7 @@ export function Sidebar({ items }: { items: NavItem[] }) {
       >
         <div className="flex items-center justify-between px-4 h-16 border-b border-gray-200 dark:border-white/5">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-[#EDAE49] to-[#D1495B] grid place-items-center">
-              <span className="font-black text-white text-xs">M</span>
-            </div>
+            <img src="/brand/logo.png" alt="Mega Plant" className="w-8 h-8 rounded-xl object-contain bg-white dark:bg-[#0b1014] shadow-sm" />
             <span className="text-sm font-semibold text-[#003D5B] dark:text-white">Mega Plant</span>
           </div>
           <button