diff --git a/apps/server/src/share/routes.ts b/apps/server/src/share/routes.ts
index 16855dd93..0a4fad593 100644
--- a/apps/server/src/share/routes.ts
+++ b/apps/server/src/share/routes.ts
@@ -6,7 +6,7 @@ import shaca from "./shaca/shaca.js";
 import shacaLoader from "./shaca/shaca_loader.js";
 import shareRoot from "./share_root.js";
 import contentRenderer from "./content_renderer.js";
-import assetPath from "../services/asset_path.js";
+import assetPath, { assetUrlFragment } from "../services/asset_path.js";
 import appPath from "../services/app_path.js";
 import searchService from "../services/search/services/search.js";
 import SearchContext from "../services/search/search_context.js";
@@ -168,6 +168,7 @@ function register(router: Router) {
             isEmpty,
             subRoot,
             assetPath: isDev ? assetPath : `../${assetPath}`,
+            assetUrlFragment,
             appPath: isDev ? appPath : `../${appPath}`,
             showLoginInShareTheme,
             t,
diff --git a/packages/share-theme/src/templates/page.ejs b/packages/share-theme/src/templates/page.ejs
index 0bc3c6ac2..641f0dc58 100644
--- a/packages/share-theme/src/templates/page.ejs
+++ b/packages/share-theme/src/templates/page.ejs
@@ -93,8 +93,10 @@ const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
     <meta name="theme-color" content="<%= openGraphColor %>">
 </head>
 <%
-const logoWidth = subRoot.note.getLabelValue("shareLogoWidth");
-const logoHeight = subRoot.note.getLabelValue("shareLogoHeight");
+const customLogoId = subRoot.note.getRelation("shareLogo")?.value;
+const logoUrl = customLogoId ? `api/images/${customLogoId}/image.png` : `../${assetUrlFragment}/images/icon-color.svg`;
+const logoWidth = subRoot.note.getLabelValue("shareLogoWidth") ?? 53;
+const logoHeight = subRoot.note.getLabelValue("shareLogoHeight") ?? 40;
 const mobileLogoHeight = logoHeight && logoWidth ? 32 / (logoWidth / logoHeight) : "";
 const shareRootLink = subRoot.note.hasLabel("shareRootLink") ? subRoot.note.getLabelValue("shareRootLink") : `./${subRoot.note.noteId}`;
 const currentTheme = note.getLabel("shareTheme") === "light" ? "light" : "dark";
@@ -123,9 +125,7 @@ content = content.replaceAll(headingRe, (...match) => {
     </script>
 <div id="mobile-header">
     <a href="<%= shareRootLink %>">
-        <% if (subRoot.note.hasRelation("shareLogo")) { %>
-            <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
-        <% } %>
+            <img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
         <%= subRoot.note.title %>
     </a>
     <button aria-label="Show Mobile Menu" id="show-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
@@ -135,9 +135,7 @@ content = content.replaceAll(headingRe, (...match) => {
         <div id="navigation">
             <div id="site-header">
                 <a href="<%= shareRootLink %>">
-                    <% if (subRoot.note.hasRelation("shareLogo")) { %>
-                        <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="<%= logoWidth %>" height="<%= logoHeight %>" alt="Logo" />
-                    <% } %>
+                    <img src="<%= logoUrl %>" width="<%= logoWidth %>" height="<%= logoHeight %>" alt="Logo" />
                     <%= subRoot.note.title %>
                 </a>
                 <div class="theme-selection">