From d733cd3428045964613a26f05708d040ab536c85 Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Mon, 10 Jun 2024 09:55:11 +0000
Subject: [PATCH] fix: Favicon sizes conform to Google Search guidelines

---
 .../defaults/app/route-templates/html.tsx       | 17 ++++-------------
 packages/image/src/image-loaders.ts             |  8 ++++++++
 packages/image/src/image-optimize.ts            |  2 ++
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/cli/templates/defaults/app/route-templates/html.tsx b/packages/cli/templates/defaults/app/route-templates/html.tsx
index 0b9b81247b1e..e2ab0912cd6b 100644
--- a/packages/cli/templates/defaults/app/route-templates/html.tsx
+++ b/packages/cli/templates/defaults/app/route-templates/html.tsx
@@ -186,24 +186,15 @@ export const links: LinksFunction = () => {
       rel: "icon",
       href: imageLoader({
         src: favIconAsset.name,
-        width: 128,
+        // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
+        width: 144,
+        height: 144,
+        fit: "pad",
         quality: 100,
         format: "auto",
       }),
       type: undefined,
     });
-  } else {
-    result.push({
-      rel: "icon",
-      href: "/favicon.ico",
-      type: "image/x-icon",
-    });
-
-    result.push({
-      rel: "shortcut icon",
-      href: "/favicon.ico",
-      type: "image/x-icon",
-    });
   }
 
   for (const asset of pageFontAssets) {
diff --git a/packages/image/src/image-loaders.ts b/packages/image/src/image-loaders.ts
index 40e3e76fa2d4..fe2e413489e8 100644
--- a/packages/image/src/image-loaders.ts
+++ b/packages/image/src/image-loaders.ts
@@ -36,6 +36,14 @@ export const createImageLoader =
     searchParams.set("quality", quality.toString());
     searchParams.set("format", format ?? "auto");
 
+    if (props.format !== "raw" && props.height != null) {
+      searchParams.set("height", props.height.toString());
+    }
+
+    if (props.format !== "raw" && props.fit != null) {
+      searchParams.set("height", props.fit);
+    }
+
     // Cloudflare docs say that we don't need to urlencode the path params
     return `${imageBaseUrl}${src}?${searchParams.toString()}`;
   };
diff --git a/packages/image/src/image-optimize.ts b/packages/image/src/image-optimize.ts
index 46e94b015ed8..c52dbfe2518f 100644
--- a/packages/image/src/image-optimize.ts
+++ b/packages/image/src/image-optimize.ts
@@ -92,6 +92,8 @@ export type ImageLoader = (
         quality: number;
         src: string;
         format?: "auto";
+        height?: number;
+        fit?: "pad";
       }
     | { src: string; format: "raw" }
 ) => string;