fix: Favicon sizes conform to Google Search guidelines

webstudio-is · Jun 10, 2024 · d733cd3 · d733cd3
1 parent 85f0309
commit d733cd3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git 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
@@ -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
@@ -92,6 +92,8 @@ export type ImageLoader = (
         quality: number;
         src: string;
         format?: "auto";
+        height?: number;
+        fit?: "pad";
       }
     | { src: string; format: "raw" }
 ) => string;