From 87848d074f4a31138e4d4b3bafbaecbba6df2a95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Tue, 17 Jun 2025 19:10:32 +0200
Subject: [PATCH 1/4] Avoid loading icon as an image instead render it inline

---
 packages/gitbook/src/routes/icon.tsx    | 48 +++++++++++++++++--------
 packages/gitbook/src/routes/ogimage.tsx | 43 ++++++++++++----------
 2 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/packages/gitbook/src/routes/icon.tsx b/packages/gitbook/src/routes/icon.tsx
index 03a6f35224..3fab8f84ac 100644
--- a/packages/gitbook/src/routes/icon.tsx
+++ b/packages/gitbook/src/routes/icon.tsx
@@ -24,6 +24,11 @@ const SIZES = {
     },
 };
 
+type RenderIconOptions = {
+    size: keyof typeof SIZES;
+    theme: 'light' | 'dark';
+};
+
 /**
  * Generate an icon for a site content.
  */
@@ -31,7 +36,7 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
     const options = getOptions(req.url);
     const size = SIZES[options.size];
 
-    const { site, customization } = context;
+    const { customization } = context;
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 
     // If the site has a custom icon, redirect to it
@@ -45,9 +50,34 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
         );
     }
 
+    return new ImageResponse(<SiteDefaultIcon context={context} options={options} />, {
+        width: size.width,
+        height: size.height,
+        headers: {
+            'cache-tag': [
+                getCacheTag({
+                    tag: 'site',
+                    site: context.site.id,
+                }),
+            ].join(','),
+        },
+    });
+}
+
+/**
+ * Render the icon as a React node.
+ */
+export function SiteDefaultIcon(props: {
+    context: GitBookSiteContext;
+    options: RenderIconOptions;
+}) {
+    const { context, options } = props;
+    const size = SIZES[options.size];
+
+    const { site, customization } = context;
     const contentTitle = site.title;
 
-    return new ImageResponse(
+    return (
         <div
             tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-black', size.boxStyle)}
             style={{
@@ -70,19 +100,7 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
                     ? getEmojiForCode(customization.favicon.emoji)
                     : contentTitle.slice(0, 1).toUpperCase()}
             </h2>
-        </div>,
-        {
-            width: size.width,
-            height: size.height,
-            headers: {
-                'cache-tag': [
-                    getCacheTag({
-                        tag: 'site',
-                        site: context.site.id,
-                    }),
-                ].join(','),
-            },
-        }
+        </div>
     );
 }
 
diff --git a/packages/gitbook/src/routes/ogimage.tsx b/packages/gitbook/src/routes/ogimage.tsx
index 6ce776c699..ff274bad40 100644
--- a/packages/gitbook/src/routes/ogimage.tsx
+++ b/packages/gitbook/src/routes/ogimage.tsx
@@ -14,6 +14,7 @@ import { filterOutNullable } from '@/lib/typescript';
 import { getCacheTag } from '@gitbook/cache-tags';
 import type { GitBookSiteContext } from '@v2/lib/context';
 import { getResizedImageURL } from '@v2/lib/images';
+import { SiteDefaultIcon } from './icon';
 
 /**
  * Render the OpenGraph image for a site content.
@@ -142,34 +143,40 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
     }
 
     const faviconLoader = async () => {
+        if (customization.header.logo) {
+            // Don't load the favicon if we have a logo
+            // as it'll not be used.
+            return null;
+        }
+
         if ('icon' in customization.favicon)
             return (
                 <img
-                    src={customization.favicon.icon[theme]}
+                    {...(await fetchImage(customization.favicon.icon[theme]))}
                     width={40}
                     height={40}
                     tw="mr-4"
                     alt="Icon"
                 />
             );
-        if ('emoji' in customization.favicon)
-            return (
-                <span tw="text-4xl mr-4">
-                    {String.fromCodePoint(Number.parseInt(`0x${customization.favicon.emoji}`))}
-                </span>
-            );
-        const iconImage = await fetchImage(
-            linker.toAbsoluteURL(
-                linker.toPathInSpace(
-                    `~gitbook/icon?size=medium&theme=${customization.themes.default}`
-                )
-            )
-        );
-        if (!iconImage) {
-            throw new Error('Icon image should always be fetchable');
-        }
 
-        return <img {...iconImage} alt="Icon" width={40} height={40} tw="mr-4" />;
+        return (
+            <div
+                tw="mr-4"
+                style={{
+                    width: 40,
+                    height: 40,
+                }}
+            >
+                <SiteDefaultIcon
+                    context={context}
+                    options={{
+                        size: 'medium',
+                        theme: customization.themes.default,
+                    }}
+                />
+            </div>
+        );
     };
 
     const logoLoader = async () => {

From cf7f791e60e89028afb318031f6df76e792532a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Tue, 17 Jun 2025 19:19:41 +0200
Subject: [PATCH 2/4] Make it work

---
 packages/gitbook/src/routes/icon.tsx    |  7 +++--
 packages/gitbook/src/routes/ogimage.tsx | 37 ++++++++++++-------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/gitbook/src/routes/icon.tsx b/packages/gitbook/src/routes/icon.tsx
index 3fab8f84ac..ab3429d631 100644
--- a/packages/gitbook/src/routes/icon.tsx
+++ b/packages/gitbook/src/routes/icon.tsx
@@ -70,8 +70,10 @@ export async function serveIcon(context: GitBookSiteContext, req: Request) {
 export function SiteDefaultIcon(props: {
     context: GitBookSiteContext;
     options: RenderIconOptions;
+    style?: React.CSSProperties;
+    tw?: string;
 }) {
-    const { context, options } = props;
+    const { context, options, style, tw } = props;
     const size = SIZES[options.size];
 
     const { site, customization } = context;
@@ -79,13 +81,14 @@ export function SiteDefaultIcon(props: {
 
     return (
         <div
-            tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-black', size.boxStyle)}
+            tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-black', size.boxStyle, tw)}
             style={{
                 width: '100%',
                 height: '100%',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
+                ...style,
             }}
         >
             <h2
diff --git a/packages/gitbook/src/routes/ogimage.tsx b/packages/gitbook/src/routes/ogimage.tsx
index eebaeb14c7..048a35caac 100644
--- a/packages/gitbook/src/routes/ogimage.tsx
+++ b/packages/gitbook/src/routes/ogimage.tsx
@@ -155,33 +155,30 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
             return null;
         }
 
+        const faviconSize = {
+            width: 48,
+            height: 48,
+        };
+
         if ('icon' in customization.favicon)
             return (
                 <img
-                    {...(await fetchImage(customization.favicon.icon[theme]))}
-                    width={40}
-                    height={40}
-                    tw="mr-4"
+                    {...(await fetchImage(customization.favicon.icon[theme], faviconSize))}
+                    {...faviconSize}
+                    // tw="mr-4"
                     alt="Icon"
                 />
             );
 
         return (
-            <div
-                tw="mr-4"
-                style={{
-                    width: 40,
-                    height: 40,
+            <SiteDefaultIcon
+                context={context}
+                options={{
+                    size: 'small',
+                    theme,
                 }}
-            >
-                <SiteDefaultIcon
-                    context={context}
-                    options={{
-                        size: 'medium',
-                        theme: customization.themes.default,
-                    }}
-                />
-            </div>
+                style={faviconSize}
+            />
         );
     };
 
@@ -233,9 +230,9 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
                     <img {...logo} alt="Logo" tw="h-[60px]" />
                 </div>
             ) : (
-                <div tw="flex">
+                <div tw="flex flex-row items-center">
                     {favicon}
-                    <h3 tw="text-4xl my-0 font-bold">{transformText(site.title)}</h3>
+                    <h3 tw="text-4xl ml-4 my-0 font-bold">{transformText(site.title)}</h3>
                 </div>
             )}
 

From 6a826070292e109137044b5cb232510b4740b96c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Tue, 17 Jun 2025 19:20:11 +0200
Subject: [PATCH 3/4] Cleanup

---
 packages/gitbook/src/routes/ogimage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/gitbook/src/routes/ogimage.tsx b/packages/gitbook/src/routes/ogimage.tsx
index 048a35caac..f79b86948f 100644
--- a/packages/gitbook/src/routes/ogimage.tsx
+++ b/packages/gitbook/src/routes/ogimage.tsx
@@ -165,7 +165,6 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
                 <img
                     {...(await fetchImage(customization.favicon.icon[theme], faviconSize))}
                     {...faviconSize}
-                    // tw="mr-4"
                     alt="Icon"
                 />
             );

From c99103303b083912141d5bae0b6368b711383086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Tue, 17 Jun 2025 19:21:01 +0200
Subject: [PATCH 4/4] Changeset

---
 .changeset/thick-cups-shout.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-cups-shout.md

diff --git a/.changeset/thick-cups-shout.md b/.changeset/thick-cups-shout.md
new file mode 100644
index 0000000000..3aabb9ad40
--- /dev/null
+++ b/.changeset/thick-cups-shout.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix crash during rendering of ogimage for VA sites with default icon.