remove / replace emojis w favicons

src/components/FaviconIcon.tsx

···
+import { useState } from "react";
+import { Globe, Settings as SettingsIcon } from "lucide-react";
+
+interface FaviconIconProps {
+  url: string;
+  alt: string;
+  className?: string;
+}
+
+export default function FaviconIcon({ url, alt, className }: FaviconIconProps) {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  if (error) {
+    return (
+      <Globe
+        className={
+          className || "w-4 h-4 text-neutral-400 dark:text-neutral-500"
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      {/* Fallback/Placeholder */}
+      {!loaded && (
+        <Globe
+          className={
+            className || "w-4 h-4 text-neutral-400 dark:text-neutral-500"
+          }
+        />
+      )}
+
+      {/* The actual image */}
+      <img
+        src={url}
+        alt={`${alt} favicon`}
+        className={className || "h-4 w-4"}
+        // Use inline style to show only when loaded, preventing a broken image icon flicker
+        style={{ display: loaded ? "block" : "none" }}
+        onLoad={() => {
+          setLoaded(true);
+          setError(false);
+        }}
+        onError={() => {
+          setError(true);
+        }}
+      />
+    </>
+  );
+}

src/components/HistoryTab.tsx

···
 import { Upload, Sparkles, ChevronRight, Database } from "lucide-react";
 import { ATPROTO_APPS } from "../constants/atprotoApps";
 import type { Upload as UploadType } from "../types";
+import FaviconIcon from "../components/FaviconIcon";
 import type { UserSettings } from "../types/settings";
 
 interface HistoryTabProps {
···
                       href={destApp.link}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-sm text-purple-750 dark:text-cyan-250 hover:underline leading-tight"
+                      className="text-sm text-purple-750 dark:text-cyan-250 hover:underline leading-tight flex items-center space-x-1"
                     >
-                      {destApp.action} on {destApp.icon} {destApp.name}
+                      <span>{destApp.action} on</span>
+
+                      <FaviconIcon
+                        url={destApp.icon}
+                        alt={destApp.name}
+                        className="w-3 h-3 mb-0.5 flex-shrink-0"
+                      />
+
+                      <span>{destApp.name}</span>
                     </a>
                   )}
                   <div className="flex items-center flex-wrap gap-2">

src/components/SetupWizard.tsx

···
                       >
                         {Object.values(ATPROTO_APPS).map((app) => (
                           <option key={app.id} value={app.id}>
-                            {app.icon} {app.name}
+                            {app.name}
                           </option>
                         ))}
                       </select>

src/constants/atprotoApps.ts

···
   bluesky: {
     id: "bluesky",
     name: "Bluesky",
-    description: "The main ATmosphere social network",
+    description: "Social app built for better conversations.",
     link: "https://bsky.app/",
-    icon: "🦋",
+    icon: "https://web-cdn.bsky.app/static/apple-touch-icon.png",
     action: "Follow",
     followLexicon: "app.bsky.graph.follow",
     enabled: true,
···
   tangled: {
     id: "tangled",
     name: "Tangled",
-    description: "Alternative following for developers & creators",
+    description: "Tightly-knit social coding!",
     link: "https://tangled.org/",
-    icon: "🐑",
+    icon: "https://tangled.org/favicon.ico",
     action: "Follow",
     followLexicon: "sh.tangled.graph.follow",
     enabled: true,
···
   spark: {
     id: "spark",
     name: "Spark",
-    description: "Short-form video focused social",
+    description:
+      "Social that puts the user in control, dedicated to video and photo.",
     link: "https://sprk.so/",
-    icon: "✨",
+    icon: "https://sprk.so/favicon.ico",
     action: "Follow",
     followLexicon: "so.sprk.graph.follow",
     enabled: true,
···
     id: "bsky list",
     name: "Bluesky List",
     description: "Organize into custom Bluesky lists",
-    link: "https://bsky.app/",
-    icon: "📃",
+    link: "https://bsky.app",
+    icon: "https://web-cdn.bsky.app/static/apple-touch-icon.png",
     action: "Add to",
     followLexicon: "app.bsky.graph.follow",
     enabled: false, // Not yet implemented

src/pages/Settings.tsx

···
                 >
                   {Object.values(ATPROTO_APPS).map((app) => (
                     <option key={app.id} value={app.id}>
-                      {app.icon} {app.name}
+                      {app.name}
                     </option>
                   ))}
                 </select>