Update frontend branding and icons

app/frontend/app/globals.css

@@ -74,12 +74,19 @@ body {
   letter-spacing: 0.02em;
 }
 
-.orb {
+.logo-wrap {
-  width: 18px;
+  display: inline-flex;
-  height: 18px;
+  align-items: center;
-  border-radius: 50%;
+  justify-content: center;
-  background: radial-gradient(circle at 30% 30%, #8fd6ff, #5c72ff);
+  width: 32px;
-  box-shadow: 0 0 18px rgba(92, 114, 255, 0.6);
+  height: 32px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.logo {
+  border-radius: 6px;
 }
 
 .hero {

app/frontend/app/layout.tsx

@@ -5,6 +5,10 @@ import { ReactNode } from "react";
 export const metadata: Metadata = {
   title: "avaaz.ai",
   description: "Health check frontend for avaaz.ai",
+  icons: {
+    icon: [{ url: "/favicon.png", type: "image/png" }],
+    shortcut: ["/favicon.png"],
+  },
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {

app/frontend/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useEffect, useMemo, useState } from "react";
 
 type HealthResponse = {
@@ -83,7 +84,16 @@ export default function Home() {
       <div className="nebula" aria-hidden="true" />
       <header className="topbar">
         <div className="brand">
-          <span className="orb" />
+          <div className="logo-wrap">
+            <Image
+              src="/logo.png"
+              alt="avaaz.ai logo"
+              width={28}
+              height={28}
+              className="logo"
+              priority
+            />
+          </div>
           avaaz.ai status
         </div>
         <div className="pill subtle">Polling every 10s</div>