diff --git a/src/routes/(account)/+layout.svelte b/src/routes/(account)/+layout.svelte
index 487d3ae1..6d9a0706 100644
--- a/src/routes/(account)/+layout.svelte
+++ b/src/routes/(account)/+layout.svelte
@@ -15,7 +15,10 @@
 
 <svelte:head>
   <meta name="robots" content="noindex, nofollow" />
-  <link rel="icon" href={data.favicon} />
+  <link
+    rel="icon"
+    href={data.favicon ? clientResolver(resolve, data.favicon) : data.favicon}
+  />
   {#if data.font?.cssSrc}
     <link rel="stylesheet" href={data.font.cssSrc} />
   {/if}
diff --git a/src/routes/(docs)/docs/(with-sidebar)/+layout.svelte b/src/routes/(docs)/docs/(with-sidebar)/+layout.svelte
index f57a93c0..949080d6 100644
--- a/src/routes/(docs)/docs/(with-sidebar)/+layout.svelte
+++ b/src/routes/(docs)/docs/(with-sidebar)/+layout.svelte
@@ -3,6 +3,8 @@
   import DocsSidebar from "../DocsSidebar.svelte";
   import DocsNavbar from "../DocsNavbar.svelte";
   import type { Snippet } from "svelte";
+  import { resolve } from "$app/paths";
+  import clientResolver from "$lib/client/resolver.js";
 
   interface Props {
     data: DocsLayoutData;
@@ -24,7 +26,14 @@
 
 <svelte:head>
   <!-- favicon -->
-  <link rel="icon" href={data.config.favicon} />
+  <link
+    rel="icon"
+    href={
+      data.config.favicon
+        ? clientResolver(resolve, data.config.favicon)
+        : data.config.favicon
+    }
+  />
 </svelte:head>
 
 <div class="bg-background text-foreground min-h-screen">
diff --git a/src/routes/(docs)/docs/+page.svelte b/src/routes/(docs)/docs/+page.svelte
index 6a70adba..137cd533 100644
--- a/src/routes/(docs)/docs/+page.svelte
+++ b/src/routes/(docs)/docs/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { DocsConfig, DocsPage } from "$lib/types/docs";
-  import { base } from "$app/paths";
+  import { base, resolve } from "$app/paths";
+  import clientResolver from "$lib/client/resolver.js";
   import ArrowRight from "@lucide/svelte/icons/arrow-right";
   import Github from "@lucide/svelte/icons/github";
   import Moon from "@lucide/svelte/icons/moon";
@@ -219,7 +220,14 @@
     name="keywords"
     content="open source status page, docker status page, self-hosted status page, uptime monitor, incident management, status page tool, free status page, kener, status page docker compose, open source uptime monitoring"
   />
-  <link rel="icon" href={data.config.favicon} />
+  <link
+    rel="icon"
+    href={
+      data.config.favicon
+        ? clientResolver(resolve, data.config.favicon)
+        : data.config.favicon
+    }
+  />
   <link rel="canonical" href="https://kener.ing/docs" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://kener.ing/docs" />
diff --git a/src/routes/(embed)/+layout.svelte b/src/routes/(embed)/+layout.svelte
index ba7c306f..8d3b2d58 100644
--- a/src/routes/(embed)/+layout.svelte
+++ b/src/routes/(embed)/+layout.svelte
@@ -4,6 +4,7 @@
   import "../embed.css";
   import { ModeWatcher } from "mode-watcher";
   import { resolve } from "$app/paths";
+  import clientResolver from "$lib/client/resolver.js";
   import { Toaster } from "$lib/components/ui/sonner/index.js";
 
   let { children, data } = $props();
@@ -15,7 +16,10 @@
 <svelte:head>
   <meta name="robots" content="noindex, nofollow" />
   <title>Kener Status</title>
-  <link rel="icon" href={data.favicon} />
+  <link
+    rel="icon"
+    href={data.favicon ? clientResolver(resolve, data.favicon) : data.favicon}
+  />
   {#if data.font?.cssSrc}
     <link rel="stylesheet" href={data.font.cssSrc} />
   {/if}
diff --git a/src/routes/(kener)/+layout.svelte b/src/routes/(kener)/+layout.svelte
index 3725bb4e..6f76c8e2 100644
--- a/src/routes/(kener)/+layout.svelte
+++ b/src/routes/(kener)/+layout.svelte
@@ -25,7 +25,10 @@
 <Toaster />
 
 <svelte:head>
-  <link rel="icon" href={data.favicon} />
+  <link
+    rel="icon"
+    href={data.favicon ? clientResolver(resolve, data.favicon) : data.favicon}
+  />
   <link rel="alternate" type="application/rss+xml" title="RSS feed" href={rssHref} />
   {#if data.font?.cssSrc}
     <link rel="stylesheet" href={data.font.cssSrc} />