Use bundled branding assets

frontend/app/ui/BrandingFavicon.tsx

@@ -1,21 +1,15 @@
 'use client'
 
 import { useEffect } from 'react'
-import { getApiBase } from '../lib/auth'
-
-const STORAGE_KEY = 'branding_version'
 
 export default function BrandingFavicon() {
   useEffect(() => {
-    const baseUrl = getApiBase()
+    const href = '/branding-icon.svg'
-    const version =
-      (typeof window !== 'undefined' && window.localStorage.getItem(STORAGE_KEY)) || ''
-    const versionSuffix = version ? `?v=${encodeURIComponent(version)}` : ''
-    const href = `${baseUrl}/branding/favicon.ico${versionSuffix}`
     let link = document.querySelector("link[rel='icon']") as HTMLLinkElement | null
     if (!link) {
       link = document.createElement('link')
       link.rel = 'icon'
+      link.type = 'image/svg+xml'
       document.head.appendChild(link)
     }
     link.href = href

frontend/app/ui/BrandingLogo.tsx

@@ -1,36 +1,14 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { getApiBase } from '../lib/auth'
-
-const STORAGE_KEY = 'branding_version'
-
 type BrandingLogoProps = {
   className?: string
   alt?: string
 }
 
 export default function BrandingLogo({ className, alt = 'Magent logo' }: BrandingLogoProps) {
-  const [src, setSrc] = useState<string | null>(null)
-
-  useEffect(() => {
-    const baseUrl = getApiBase()
-    const version =
-      (typeof window !== 'undefined' && window.localStorage.getItem(STORAGE_KEY)) || ''
-    const versionSuffix = version ? `?v=${encodeURIComponent(version)}` : ''
-    setSrc(`${baseUrl}/branding/logo.png${versionSuffix}`)
-  }, [])
-
-  if (!src) {
-    return null
-  }
-
   return (
     <img
       className={className}
-      src={src}
+      src="/branding-logo.svg"
       alt={alt}
-      onError={() => setSrc(null)}
     />
   )
 }

frontend/public/branding-icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="magentIconGlow" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ff6b2b"/>
+      <stop offset="100%" stop-color="#ffa84b"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="#0e1624"/>
+  <path
+    d="M18 50V14h8l6 11 6-11h8v36h-8V32l-6 10-6-10v18h-8z"
+    fill="url(#magentIconGlow)"
+  />
+</svg>

frontend/public/branding-logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <defs>
+    <linearGradient id="magentGlow" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ff6b2b"/>
+      <stop offset="100%" stop-color="#ffa84b"/>
+    </linearGradient>
+  </defs>
+  <rect width="300" height="300" rx="56" fill="#0e1624"/>
+  <rect x="24" y="24" width="252" height="252" rx="44" fill="#121d31"/>
+  <path
+    d="M80 220V80h28l42 70 42-70h28v140h-28v-88l-42 66-42-66v88H80z"
+    fill="url(#magentGlow)"
+  />
+</svg>