improve external link component

package.json

@@ -58,6 +58,7 @@
     "sharp": "^0.33.5",
     "svelte": "^5.16.0",
     "tailwindcss": "^3.4.17",
+    "uint8array-extras": "^1.4.0",
     "unplugin-icons": "^0.22.0"
   },
   "devDependencies": {

src/components/ExternalLink.astro

@@ -1,5 +1,6 @@
 ---
 import type { HTMLAttributes } from "astro/types";
+import { uint8ArrayToBase64 } from "uint8array-extras";
 
 const FAVICON_API = new URL("https://www.google.com/s2/favicons");
 
@@ -9,7 +10,7 @@ type Props = HTMLAttributes<"a"> & {
 
 const { href, position = "before", ...props } = Astro.props;
 
-let favicon: Buffer | undefined = undefined;
+let favicon: Uint8Array | undefined = undefined;
 if (
   href &&
   (typeof href === "string"
@@ -20,25 +21,26 @@ if (
   const searchParams = new URLSearchParams({ domain: url.hostname, sz: "64" });
 
   try {
-    favicon = await fetch(`${FAVICON_API}?${searchParams}`).then(async (res) =>
-      Buffer.from(await res.arrayBuffer()),
-    );
+    const response = await fetch(`${FAVICON_API}?${searchParams}`);
+    favicon = await response.bytes();
   } catch (err) {
-    console.error(`Error fetching favicon: ${href}`, err);
+    console.warn(`Error fetching favicon: ${href}`, err);
   }
 }
 
 const content = (await Astro.slots.render("default")).trim();
-const imageProps = {
-  width: 16,
-  height: 16,
-  src: `data:image/png;base64,${favicon?.toString("base64")}`,
-  alt: "favicon",
-  fetchpriority: "low",
-  loading: "lazy",
-  decoding: "async",
-  "data-site-icon": true,
-} as const satisfies HTMLAttributes<"img">;
+const imageProps =
+  favicon &&
+  ({
+    width: 16,
+    height: 16,
+    src: `data:image/png;base64,${uint8ArrayToBase64(favicon)}`,
+    alt: "favicon",
+    fetchpriority: "low",
+    loading: "lazy",
+    decoding: "async",
+    "aria-hidden": true,
+  } as const satisfies HTMLAttributes<"img">);
 ---
 
 {