favicon in backlinks and car explorer

src/components/backlinks.tsx

···
 import { getAllBacklinks, getRecordBacklinks, LinksWithRecords } from "../utils/api.js";
 import { localDateFromTimestamp } from "../utils/date.js";
 import { Button } from "./button.jsx";
+import { Favicon } from "./favicon.jsx";
 
 type BacklinksProps = {
   target: string;
···
 ) => {
   const [expanded, setExpanded] = createSignal(false);
 
+  const authority = () => props.collection.split(".").slice(0, 2).join(".");
+
   return (
     <div class="overflow-hidden rounded-lg border border-neutral-200 dark:border-neutral-700">
       <button
         class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50"
         onClick={() => setExpanded(!expanded())}
       >
-        <div class="flex min-w-0 flex-1 flex-col">
-          <span class="w-full truncate">{props.collection}</span>
-          <span class="w-full text-xs wrap-break-word text-neutral-500 dark:text-neutral-400">
-            {props.path.slice(1)}
-          </span>
+        <div class="flex min-w-0 flex-1 items-center gap-2">
+          <Favicon authority={authority()} />
+          <div class="flex min-w-0 flex-1 flex-col">
+            <span class="w-full truncate">{props.collection}</span>
+            <span class="w-full text-xs wrap-break-word text-neutral-500 dark:text-neutral-400">
+              {props.path.slice(1)}
+            </span>
+          </div>
         </div>
         <div class="flex shrink-0 items-center gap-2 text-neutral-700 dark:text-neutral-300">
           <span class="text-xs">

src/components/favicon.tsx

···
+import { createSignal, JSX, Show } from "solid-js";
+
+export const Favicon = (props: {
+  authority: string;
+  wrapper?: (children: JSX.Element) => JSX.Element;
+}) => {
+  const [loaded, setLoaded] = createSignal(false);
+  const domain = () => props.authority.split(".").reverse().join(".");
+
+  const content = (
+    <>
+      <Show when={!loaded()}>
+        <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
+      </Show>
+      <img
+        src={
+          ["bsky.app", "bsky.chat"].includes(domain()) ?
+            "https://web-cdn.bsky.app/static/apple-touch-icon.png"
+          : `https://${domain()}/favicon.ico`
+        }
+        alt=""
+        class="h-4 w-4"
+        classList={{ hidden: !loaded() }}
+        onLoad={() => setLoaded(true)}
+        onError={() => setLoaded(false)}
+      />
+    </>
+  );
+
+  return props.wrapper ?
+      props.wrapper(content)
+    : <div class="flex h-5 w-4 shrink-0 items-center justify-center">{content}</div>;
+};

src/views/car/explore.tsx

···
 import { Title } from "@solidjs/meta";
 import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from "solid-js";
 import { Button } from "../../components/button.jsx";
+import { Favicon } from "../../components/favicon.jsx";
 import { JSONValue } from "../../components/json.jsx";
 import { TextInput } from "../../components/text-input.jsx";
 import { isTouchDevice } from "../../layout.jsx";
···
         <For each={filteredEntries()}>
           {(entry) => {
             const hasSingleEntry = entry.entries.length === 1;
+            const authority = () => entry.name.split(".").slice(0, 2).join(".");
 
             return (
               <li>
···
                   }}
                   class="flex w-full items-center gap-2 rounded p-2 text-left text-sm hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-800 dark:active:bg-neutral-700"
                 >
+                  <Favicon authority={authority()} />
                   <span
                     class="truncate font-medium"
                     classList={{

src/views/repo.tsx

···
   MenuSeparator,
   NavMenu,
 } from "../components/dropdown.jsx";
+import { Favicon } from "../components/favicon.jsx";
 import {
   addNotification,
   removeNotification,
···
                     )}
                   >
                     {(authority) => {
-                      const reversedDomain = authority.split(".").reverse().join(".");
-                      const [faviconLoaded, setFaviconLoaded] = createSignal(false);
-
                       const isHighlighted = () => location.hash === `#collections:${authority}`;
 
                       return (
···
                             "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),
                           }}
                         >
-                          <a
-                            href={`#collections:${authority}`}
-                            class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
-                          >
-                            <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">
-                              <span class="iconify lucide--link absolute -left-2 w-7"></span>
-                            </span>
-                            <Show when={!faviconLoaded()}>
-                              <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />
-                            </Show>
-                            <img
-                              src={
-                                ["bsky.app", "bsky.chat"].includes(reversedDomain) ?
-                                  "https://web-cdn.bsky.app/static/apple-touch-icon.png"
-                                : `https://${reversedDomain}/favicon.ico`
-                              }
-                              alt={`${reversedDomain} favicon`}
-                              class="h-4 w-4"
-                              classList={{ hidden: !faviconLoaded() }}
-                              onLoad={() => setFaviconLoaded(true)}
-                              onError={() => setFaviconLoaded(false)}
-                            />
-                          </a>
+                          <Favicon
+                            authority={authority}
+                            wrapper={(children) => (
+                              <a
+                                href={`#collections:${authority}`}
+                                class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"
+                              >
+                                <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">
+                                  <span class="iconify lucide--link absolute -left-2 w-7"></span>
+                                </span>
+                                {children}
+                              </a>
+                            )}
+                          />
                           <div class="flex flex-1 flex-col">
                             <For
                               each={nsids()?.[authority].nsids.filter((nsid) =>