fix: improve favicon contrast in chat links

Adds a compact themed badge behind link favicons
Prevents favicon badge borders from clipping
Keeps external link icons readable across themes

packages/ui/src/components/chat/MarkdownRendererImpl.tsx

@@ -101,15 +101,17 @@ const ExternalLinkFavicon: React.FC<{ href: string }> = ({ href }) => {
   }
 
   return (
-    <img
-      src={faviconUrl}
-      alt=""
-      aria-hidden="true"
-      loading="lazy"
-      decoding="async"
-      className="mr-1 inline-block size-4 rounded-sm align-[-0.1875em]"
-      onError={() => setFailed(true)}
-    />
+    <span className="mr-1 inline-flex size-[18px] items-center justify-center rounded border border-[var(--border)] bg-[var(--interactive-hover)] align-[-0.25em]">
+      <img
+        src={faviconUrl}
+        alt=""
+        aria-hidden="true"
+        loading="lazy"
+        decoding="async"
+        className="size-3.5 rounded-sm"
+        onError={() => setFailed(true)}
+      />
+    </span>
   );
 };
 

packages/ui/src/components/chat/message/parts/ProgressiveGroup.tsx

@@ -51,15 +51,17 @@ const ExternalLinkFavicon: React.FC<{ href: string }> = ({ href }) => {
     }
 
     return (
-        <img
-            src={faviconUrl}
-            alt=""
-            aria-hidden="true"
-            loading="lazy"
-            decoding="async"
-            className="size-4 flex-shrink-0 rounded-sm"
-            onError={() => setFailed(true)}
-        />
+        <span className="inline-flex size-[18px] flex-shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--interactive-hover)]">
+            <img
+                src={faviconUrl}
+                alt=""
+                aria-hidden="true"
+                loading="lazy"
+                decoding="async"
+                className="size-3.5 rounded-sm"
+                onError={() => setFailed(true)}
+            />
+        </span>
     );
 };