diff --git a/hyperglass/configuration/__init__.py b/hyperglass/configuration/__init__.py
index 28e134a..2c3d4d1 100644
--- a/hyperglass/configuration/__init__.py
+++ b/hyperglass/configuration/__init__.py
@@ -431,7 +431,7 @@ vrfs = _build_vrfs()
 networks = _build_networks()
 frontend_networks = _build_frontend_networks()
 frontend_devices = _build_frontend_devices()
-_frontend_fields = {
+_include_fields = {
     "cache": {"show_text", "timeout"},
     "debug": ...,
     "developer_mode": ...,
@@ -445,7 +445,12 @@ _frontend_fields = {
     "web": ...,
     "messages": ...,
 }
-_frontend_params = params.dict(include=_frontend_fields)
+_frontend_params = params.dict(include=_include_fields)
+
+
+_frontend_params["web"]["logo"]["light_format"] = params.web.logo.light.suffix
+_frontend_params["web"]["logo"]["dark_format"] = params.web.logo.dark.suffix
+
 _frontend_params.update(
     {
         "hyperglass_version": __version__,
diff --git a/hyperglass/ui/components/Title.js b/hyperglass/ui/components/Title.js
index 660bc3d..4c2bbc7 100644
--- a/hyperglass/ui/components/Title.js
+++ b/hyperglass/ui/components/Title.js
@@ -59,21 +59,22 @@ const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
   </Stack>
 );
 
-const Logo = ({ text, logo, showSubtitle }) => {
+const Logo = ({ text, logo }) => {
   const { colorMode } = useColorMode();
-  const logoColor = { light: logo.dark, dark: logo.light };
-  const logoPath = logoColor[colorMode];
-  return <Image src={logoPath} alt={text.title} width={logo.width ?? "auto"} />;
+  const logoExt = { light: logo.dark_format, dark: logo.light_format };
+  const logoName = { light: "dark", dark: "light" };
+  return (
+    <Image
+      alt={text.title}
+      width={logo.width ?? "auto"}
+      src={`/images/${logoName[colorMode]}${logoExt[colorMode]}`}
+    />
+  );
 };
 
 const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
   <>
-    <Logo
-      text={text}
-      logo={logo}
-      showSubtitle={showSubtitle}
-      mediaSize={mediaSize}
-    />
+    <Logo text={text} logo={logo} mediaSize={mediaSize} />
     <AnimatePresence>
       {showSubtitle && (
         <AnimatedSubtitle mt={6} text={text.subtitle} {...subtitleAnimation} />
@@ -84,7 +85,7 @@ const LogoSubtitle = ({ text, logo, showSubtitle, mediaSize }) => (
 
 const All = ({ text, logo, mediaSize, showSubtitle }) => (
   <>
-    <Logo text={text} logo={logo} showSubtitle={showSubtitle} />
+    <Logo text={text} logo={logo} />
     <TextOnly
       mediaSize={mediaSize}
       showSubtitle={showSubtitle}