@cedgetec-utils/astro-components 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedgetec-utils/astro-components",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "keywords": [
     "astro-component"
   ],

package/src/components/Head.astro

@@ -25,33 +25,45 @@ const title =
 const ogTitle = slug === "" ? props.siteName : `${props.title}`;
 
 // Common favicon / PWA icon sizes.
-const faviconSizes = [16, 32, 48, 96, 192, 512];
+const faviconSizes = [32, 48, 96, 192, 512];
 
 type Icon = { type: string; sizes: string; href: string };
 
 const isSvg = (src: string | ImageMetadata) =>
   typeof src === "string" ? src.endsWith(".svg") : src.format === "svg";
 
+const buildSvgIcon = async (src: string | ImageMetadata): Promise<Icon[]> => {
+  const image = await getImage({ src, format: "svg", quality: "max" });
+  return [{ type: "image/svg+xml", sizes: "any", href: image.src }];
+};
+
 const buildIcons = async (src: string | ImageMetadata): Promise<Icon[]> => {
   // An SVG favicon scales to any size, so pass it through unchanged rather
   // than rasterizing it to PNG at every size.
   if (isSvg(src)) {
-    const image = await getImage({ src, format: "svg" });
-    return [{ type: "image/svg+xml", sizes: "any", href: image.src }];
+    return buildSvgIcon(src);
   }
 
-  return Promise.all(
-    faviconSizes.map(async (size) => {
-      const image = await getImage({
-        src,
-        width: size,
-        height: size,
-        fit: "contain",
-        format: "png",
-      });
-      return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
-    }),
-  );
+  try {
+    return await Promise.all(
+      faviconSizes.map(async (size) => {
+        const image = await getImage({
+          src,
+          width: size,
+          height: size,
+          fit: "contain",
+          format: "png",
+          quality: "max",
+        });
+        return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
+      }),
+    );
+  } catch {
+    // `isSvg` only detects SVGs by their `.svg` extension, so a string URL
+    // that points to an SVG without one slips through and fails to
+    // rasterize. Fall back to treating it as an SVG.
+    return buildSvgIcon(src);
+  }
 };
 
 const iconsLight = await buildIcons(props.icons.light);
@@ -123,4 +135,4 @@ const openGraphImage = props.image
   {props.type && <meta property="og:type" content={props.type} />}
   {openGraphImage && <meta property="og:image" content={openGraphImage.src} />}
   <slot />
-</head>
+</head>