diff --git a/src/assets/logo-dark.png b/src/assets/logo-dark.png
new file mode 100644
index 0000000..d86f6f5
Binary files /dev/null and b/src/assets/logo-dark.png differ
diff --git a/src/assets/logo-light.png b/src/assets/logo-light.png
new file mode 100644
index 0000000..0c0a02a
Binary files /dev/null and b/src/assets/logo-light.png differ
diff --git a/src/client/app.ts b/src/client/app.ts
index 275e6bd..4613fa4 100644
--- a/src/client/app.ts
+++ b/src/client/app.ts
@@ -205,7 +205,7 @@ async function createThumbnailObjectUrl(blob) {
 }
 
 function setBrandLogo(theme) {
-  panelLogo.src = theme === "dark" ? "/assets/logo-dark.svg" : "/assets/logo-light.svg";
+  panelLogo.src = theme === "dark" ? "/assets/logo-dark.png" : "/assets/logo-light.png";
 }
 
 function setTheme(theme, persist = true) {
diff --git a/src/server/client-assets.ts b/src/server/client-assets.ts
index eb1caa8..1021c5e 100644
--- a/src/server/client-assets.ts
+++ b/src/server/client-assets.ts
@@ -45,7 +45,7 @@ function isAllowedAssetPath(assetName: string, isVendorAsset: boolean, isAppAsse
   }
 
   if (isAppAsset) {
-    return /^[a-z0-9_.-]+\.svg$/i.test(assetName);
+    return /^[a-z0-9_.-]+\.(svg|png)$/i.test(assetName);
   }
 
   if (isVendorAsset) {
@@ -68,5 +68,9 @@ function getContentType(assetName: string): string {
     return "image/svg+xml; charset=utf-8";
   }
 
+  if (assetName.endsWith(".png")) {
+    return "image/png";
+  }
+
   return "text/javascript; charset=utf-8";
 }
diff --git a/src/server/page-template.ts b/src/server/page-template.ts
index a8a10c4..fd8d15c 100644
--- a/src/server/page-template.ts
+++ b/src/server/page-template.ts
@@ -52,7 +52,7 @@ ${APP_STYLES}
           <img
             class="panel-logo"
             id="panel-logo"
-            src="/assets/logo-light.svg"
+            src="/assets/logo-light.png"
             alt="mapix"
             width="156"
             height="66"