diff --git a/package-lock.json b/package-lock.json
index 84713725..2c9d3903 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,7 @@
         "rehype-sanitize": "^6.0.0",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
+        "uri-templates": "^0.2.0",
         "vaul": "^0.9.3",
         "zod": "^4.3.6"
       },
@@ -9755,6 +9756,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uri-templates": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/uri-templates/-/uri-templates-0.2.0.tgz",
+      "integrity": "sha512-EWkjYEN0L6KOfEoOH6Wj4ghQqU7eBZMJqRHQnxQAq+dSEzRPClkWjf8557HkWQXF6BrAUoLSAyy9i3RVTliaNg==",
+      "license": "http://geraintluff.github.io/tv4/LICENSE.txt"
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
diff --git a/package.json b/package.json
index 40798e71..bf3c785e 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "rehype-sanitize": "^6.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "uri-templates": "^0.2.0",
     "vaul": "^0.9.3",
     "zod": "^4.3.6"
   },
diff --git a/src/App.tsx b/src/App.tsx
index 382c77fb..001b2597 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -69,7 +69,7 @@ const defaultConfig: AppConfig = {
   nip85OnlyMode: true,
   blossomServers: ['https://blossom.primal.net/'],
   defaultZapComment: 'Zapped with Mew!',
-  faviconProvider: 'https://favicon.shakespeare.diy/?url={href}',
+  faviconUrl: 'https://favicon.shakespeare.diy/?url={href}',
   corsProxy: 'https://proxy.shakespeare.diy/?url={href}',
   contentWarningPolicy: 'blur',
 };
diff --git a/src/components/AdvancedSettings.tsx b/src/components/AdvancedSettings.tsx
index 346bc33f..03e0ac3a 100644
--- a/src/components/AdvancedSettings.tsx
+++ b/src/components/AdvancedSettings.tsx
@@ -22,7 +22,7 @@ export function AdvancedSettings() {
   const [statsPubkey, setStatsPubkey] = useState(config.nip85StatsPubkey);
   const [newBlossomUrl, setNewBlossomUrl] = useState('');
   const [defaultZapComment, setDefaultZapComment] = useState(config.defaultZapComment);
-  const [faviconProvider, setFaviconProvider] = useState(config.faviconProvider);
+  const [faviconUrl, setFaviconUrl] = useState(config.faviconUrl);
   const [corsProxy, setCorsProxy] = useState(config.corsProxy);
 
   const handleAddBlossomServer = () => {
@@ -352,25 +352,25 @@ export function AdvancedSettings() {
                 </div>
               </div>
 
-              {/* Favicon Provider */}
+              {/* Favicon URL */}
               <div>
-                <Label htmlFor="favicon-provider" className="text-sm font-medium">
-                  Favicon Provider
+                <Label htmlFor="favicon-url" className="text-sm font-medium">
+                  Favicon URL
                 </Label>
                 <p className="text-xs text-muted-foreground mt-1 mb-2">
-                  URI template for fetching site favicons. Use <code className="bg-muted px-1 rounded">{'{href}'}</code> as a placeholder for the page URL.
+                  URI template for fetching site favicons. Supports RFC 6570 variables: <code className="bg-muted px-1 rounded">{'{href}'}</code>, <code className="bg-muted px-1 rounded">{'{hostname}'}</code>, <code className="bg-muted px-1 rounded">{'{origin}'}</code>, etc.
                 </p>
                 <Input
-                  id="favicon-provider"
-                  value={faviconProvider}
+                  id="favicon-url"
+                  value={faviconUrl}
                   onChange={(e) => {
-                    setFaviconProvider(e.target.value);
+                    setFaviconUrl(e.target.value);
                   }}
                   onBlur={() => {
-                    const trimmed = faviconProvider.trim();
-                    if (trimmed && trimmed !== config.faviconProvider) {
-                      updateConfig(() => ({ faviconProvider: trimmed }));
-                      toast({ title: 'Favicon provider updated' });
+                    const trimmed = faviconUrl.trim();
+                    if (trimmed && trimmed !== config.faviconUrl) {
+                      updateConfig(() => ({ faviconUrl: trimmed }));
+                      toast({ title: 'Favicon URL updated' });
                     }
                   }}
                   placeholder="https://favicon.shakespeare.diy/?url={href}"
diff --git a/src/components/AppProvider.tsx b/src/components/AppProvider.tsx
index ce3f95e2..0a66238e 100644
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@@ -63,7 +63,7 @@ const AppConfigSchema = z.object({
   nip85OnlyMode: z.boolean(),
   blossomServers: z.array(z.url()),
   defaultZapComment: z.string(),
-  faviconProvider: z.string(),
+  faviconUrl: z.string(),
   corsProxy: z.string(),
   contentWarningPolicy: z.enum(['blur', 'hide', 'show']),
 });
diff --git a/src/components/DomainFavicon.tsx b/src/components/DomainFavicon.tsx
deleted file mode 100644
index 1fb2174c..00000000
--- a/src/components/DomainFavicon.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { useState, useMemo, useEffect } from 'react';
-import { cn } from '@/lib/utils';
-import { useAppContext } from '@/hooks/useAppContext';
-
-interface DomainFaviconProps {
-  /** Full URL or just domain name */
-  domain: string;
-  /** Size in pixels (default: 16) */
-  size?: number;
-  className?: string;
-}
-
-/**
- * Fetches the HTML of a domain via CORS proxy and parses for favicon link tags.
- * Returns the discovered favicon URL or null if not found.
- */
-async function discoverFavicon(origin: string, corsProxy: string): Promise<string | null> {
-  try {
-    // Use CORS proxy to fetch the HTML
-    const proxyUrl = corsProxy.replace('{href}', encodeURIComponent(origin));
-    const response = await fetch(proxyUrl, { 
-      method: 'GET',
-      headers: { 'Accept': 'text/html' }
-    });
-    if (!response.ok) return null;
-
-    const html = await response.text();
-    
-    // Parse favicon from <link> tags
-    // Look for rel="icon", rel="shortcut icon", or rel="apple-touch-icon"
-    const iconRegex = /<link[^>]*rel=["'](?:shortcut )?icon["'][^>]*>/gi;
-    const appleIconRegex = /<link[^>]*rel=["']apple-touch-icon["'][^>]*>/gi;
-    
-    const matches = [...html.matchAll(iconRegex), ...html.matchAll(appleIconRegex)];
-    
-    for (const match of matches) {
-      const linkTag = match[0];
-      const hrefMatch = linkTag.match(/href=["']([^"']+)["']/i);
-      if (hrefMatch && hrefMatch[1]) {
-        let href = hrefMatch[1];
-        // Make absolute URL if relative
-        if (href.startsWith('/')) {
-          href = `${origin}${href}`;
-        } else if (!href.startsWith('http')) {
-          href = `${origin}/${href}`;
-        }
-        return href;
-      }
-    }
-    
-    return null;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Displays a favicon for a domain or URL.
- * Strategy: Scrape HTML for favicon → try common paths → fallback to favicon provider → hide if all fail
- */
-export function DomainFavicon({ domain, size = 16, className }: DomainFaviconProps) {
-  const { config } = useAppContext();
-  const [faviconUrl, setFaviconUrl] = useState<string | null>(null);
-  const [fallbackIndex, setFallbackIndex] = useState(0);
-  const [triedProvider, setTriedProvider] = useState(false);
-  const [failed, setFailed] = useState(false);
-
-  // Get origin from domain
-  const origin = useMemo(() => {
-    try {
-      if (domain.startsWith('http://') || domain.startsWith('https://')) {
-        return new URL(domain).origin;
-      }
-      return `https://${domain}`;
-    } catch {
-      return null;
-    }
-  }, [domain]);
-
-  // Direct favicon URLs to try (svg, ico, png)
-  const directUrls = useMemo(() => {
-    if (!origin) return [];
-    return [
-      `${origin}/favicon.svg`,
-      `${origin}/favicon.ico`,
-      `${origin}/favicon.png`,
-    ];
-  }, [origin]);
-
-  // Favicon provider fallback URL (configurable template)
-  const providerUrl = useMemo(() => {
-    if (!origin) return null;
-    return config.faviconProvider.replace('{href}', encodeURIComponent(origin));
-  }, [origin, config.faviconProvider]);
-
-  // Discover favicon from HTML on mount
-  useEffect(() => {
-    if (!origin) {
-      setFailed(true);
-      return;
-    }
-
-    let mounted = true;
-
-    // Try to discover favicon from HTML
-    discoverFavicon(origin, config.corsProxy).then((url) => {
-      if (mounted) {
-        if (url) {
-          // Found favicon in HTML, use it
-          setFaviconUrl(url);
-        } else {
-          // No favicon in HTML, start with first direct URL
-          setFaviconUrl(directUrls[0] || null);
-        }
-      }
-    });
-
-    return () => {
-      mounted = false;
-    };
-  }, [origin, directUrls]);
-
-  const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const img = e.currentTarget;
-    
-    // If this is a favicon provider service, check if it returned the default placeholder
-    if (faviconUrl === providerUrl) {
-      // Google's default placeholder is exactly 16x16 gray globe
-      // Real favicons from Google are usually larger or have different aspect ratios
-      if (img.naturalWidth === 16 && img.naturalHeight === 16) {
-        // This is likely the default globe - reject it
-        setFailed(true);
-        return;
-      }
-    }
-  };
-
-  const handleError = () => {
-    // If we haven't tried all direct URLs yet
-    if (fallbackIndex < directUrls.length - 1) {
-      setFallbackIndex(fallbackIndex + 1);
-      setFaviconUrl(directUrls[fallbackIndex + 1]);
-    } else if (!triedProvider && providerUrl) {
-      // All direct URLs failed, try favicon provider
-      setTriedProvider(true);
-      setFaviconUrl(providerUrl);
-    } else {
-      // Even Google failed, hide the favicon
-      setFailed(true);
-    }
-  };
-
-  if (!faviconUrl || failed) {
-    return null;
-  }
-
-  return (
-    <img
-      src={faviconUrl}
-      alt=""
-      className={cn('shrink-0', className)}
-      style={{ width: size, height: size }}
-      loading="lazy"
-      onLoad={handleLoad}
-      onError={handleError}
-    />
-  );
-}
diff --git a/src/components/ExternalFavicon.tsx b/src/components/ExternalFavicon.tsx
new file mode 100644
index 00000000..e7e7d882
--- /dev/null
+++ b/src/components/ExternalFavicon.tsx
@@ -0,0 +1,77 @@
+import { useAppContext } from '@/hooks/useAppContext';
+import { faviconUrl } from '@/lib/faviconUrl';
+import { cn } from '@/lib/utils';
+import { ReactNode, useMemo } from 'react';
+
+interface ExternalFaviconProps {
+  /** The URL to fetch the favicon for */
+  url: string | URL | undefined;
+  /** Size of the favicon in pixels */
+  size?: number;
+  /** Fallback element to display if favicon fails to load */
+  fallback?: ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * ExternalFavicon component that fetches and displays a favicon for a given URL
+ * using the configurable favicon service from app settings.
+ */
+export function ExternalFavicon({
+  url,
+  size = 16,
+  fallback,
+  className = '',
+}: ExternalFaviconProps) {
+  const { config } = useAppContext();
+
+  // Generate the favicon URL using the configured template
+  const faviconSrc = useMemo(() => {
+    if (!url) return;
+    try {
+      const parsedUrl = new URL(url);
+
+      // Strip `ai.` and `api.` subdomains for a better chance at finding a favicon
+      parsedUrl.hostname = parsedUrl.hostname.replace(/^(ai\.|api\.|enclave\.)/, '');
+
+      // Normalize the URL to ensure it has a protocol
+      return faviconUrl({ template: config.faviconUrl, url: parsedUrl });
+    } catch {
+      return;
+    }
+  }, [url, config.faviconUrl]);
+
+  // If faviconSrc is not available, render the fallback directly
+  if (!faviconSrc) {
+    return (
+      <span className={cn('inline-flex items-center justify-center', className)}>
+        <span>{fallback}</span>
+      </span>
+    )
+  }
+
+  return (
+    <span className={cn('inline-flex items-center justify-center', className)}>
+      <img
+        src={faviconSrc}
+        alt=""
+        className="object-contain"
+        style={{ width: size, height: size }}
+        onError={(e) => {
+          // Hide the image and show the fallback on error
+          e.currentTarget.style.display = 'none';
+          const fallbackElement = e.currentTarget.nextElementSibling as HTMLElement;
+          if (fallbackElement) {
+            fallbackElement.style.display = 'inline-block';
+          }
+        }}
+      />
+      {fallback && (
+        <span style={{ display: 'none' }}>
+          {fallback}
+        </span>
+      )}
+    </span>
+  );
+}
diff --git a/src/components/Nip05Badge.tsx b/src/components/Nip05Badge.tsx
index 2e29ce96..ab22fece 100644
--- a/src/components/Nip05Badge.tsx
+++ b/src/components/Nip05Badge.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import { cn } from '@/lib/utils';
-import { DomainFavicon } from '@/components/DomainFavicon';
+import { ExternalFavicon } from '@/components/ExternalFavicon';
 import { getNip05Domain, getNip05User } from '@/lib/nip05';
 
 interface Nip05BadgeProps {
@@ -54,7 +54,7 @@ export function Nip05Badge({ nip05, className, iconSize = 16 }: Nip05BadgeProps)
           onClick={(e) => e.stopPropagation()}
           title={`View ${domain} feed`}
         >
-          <DomainFavicon domain={domain} size={iconSize} className="shrink-0" />
+          <ExternalFavicon url={`https://${domain}`} size={iconSize} className="shrink-0" />
         </Link>
       )}
     </span>
diff --git a/src/components/ProfileHoverCard.tsx b/src/components/ProfileHoverCard.tsx
index b311e50e..a1526972 100644
--- a/src/components/ProfileHoverCard.tsx
+++ b/src/components/ProfileHoverCard.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
-import { DomainFavicon } from '@/components/DomainFavicon';
+import { ExternalFavicon } from '@/components/ExternalFavicon';
 import { EmojifiedText } from '@/components/CustomEmoji';
 import { useAuthor } from '@/hooks/useAuthor';
 import { genUserName } from '@/lib/genUserName';
@@ -83,7 +83,7 @@ export function ProfileHoverCard({ pubkey, children, asChild }: ProfileHoverCard
             <div className="flex items-center gap-1 text-sm text-muted-foreground mt-0.5">
               <span className="truncate">@{nip05Display}</span>
               {nip05Domain && (
-                <DomainFavicon domain={nip05Domain} size={14} className="shrink-0" />
+                <ExternalFavicon url={`https://${nip05Domain}`} size={14} className="shrink-0" />
               )}
             </div>
           )}
diff --git a/src/components/ProfileRightSidebar.tsx b/src/components/ProfileRightSidebar.tsx
index 6ac11924..6a9097ad 100644
--- a/src/components/ProfileRightSidebar.tsx
+++ b/src/components/ProfileRightSidebar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
@@ -6,6 +6,7 @@ import { Check, Copy, QrCode, ExternalLink, Bitcoin, ShieldAlert } from 'lucide-
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ExternalFavicon } from '@/components/ExternalFavicon';
 import { useToast } from '@/hooks/useToast';
 import { useFeedSettings } from '@/hooks/useFeedSettings';
 import { getEnabledFeedKinds } from '@/lib/extraKinds';
@@ -119,41 +120,6 @@ function eventLink(item: MediaItem): string {
   return `/${nip19.neventEncode({ id: item.eventId, author: item.authorPubkey })}`;
 }
 
-/** Try multiple favicon paths: /favicon.ico, then /favicon.svg. */
-function Favicon({ url }: { url: string }) {
-  const candidates = useMemo(() => {
-    try {
-      const origin = new URL(url).origin;
-      return [`${origin}/favicon.ico`, `${origin}/favicon.svg`];
-    } catch {
-      return [];
-    }
-  }, [url]);
-
-  const [index, setIndex] = useState(0);
-  const [failed, setFailed] = useState(false);
-
-  if (candidates.length === 0 || failed) return null;
-
-  const src = candidates[index];
-
-  return (
-    <img
-      src={src}
-      alt=""
-      className="size-4 shrink-0"
-      loading="lazy"
-      onError={() => {
-        if (index < candidates.length - 1) {
-          setIndex(index + 1);
-        } else {
-          setFailed(true);
-        }
-      }}
-    />
-  );
-}
-
 /** Bitcoin QR code modal */
 function BitcoinQRModal({ address }: { address: string }) {
   const [qrUrl, setQrUrl] = useState('');
@@ -282,7 +248,7 @@ function ProfileFieldRow({ field }: { field: ProfileField }) {
           rel="noopener noreferrer"
           className="flex items-center gap-1.5 text-sm text-primary hover:underline truncate mt-0.5"
         >
-          <Favicon url={field.value} />
+          <ExternalFavicon url={field.value} size={16} className="shrink-0" />
           <span className="truncate">{field.value.replace(/^https?:\/\//, '')}</span>
         </a>
       ) : (
diff --git a/src/contexts/AppContext.ts b/src/contexts/AppContext.ts
index 2213984a..0e091014 100644
--- a/src/contexts/AppContext.ts
+++ b/src/contexts/AppContext.ts
@@ -83,8 +83,8 @@ export interface AppConfig {
   blossomServers: string[];
   /** Default comment attached to zaps */
   defaultZapComment: string;
-  /** Favicon provider URI template. Use {href} as placeholder for the page URL. */
-  faviconProvider: string;
+  /** Favicon URI template. Supports RFC 6570 variables: {href}, {origin}, {hostname}, etc. */
+  faviconUrl: string;
   /** CORS proxy URI template. Use {href} as placeholder for the target URL (URL-encoded). */
   corsProxy: string;
   /** How to handle NIP-36 content-warning events (blur, hide, or show). Default: "blur". */
diff --git a/src/lib/faviconUrl.ts b/src/lib/faviconUrl.ts
new file mode 100644
index 00000000..e7cb600c
--- /dev/null
+++ b/src/lib/faviconUrl.ts
@@ -0,0 +1,31 @@
+import UriTemplate from 'uri-templates';
+
+export interface FaviconUrlOpts {
+  template: string;
+  url: string | URL;
+}
+
+/**
+ * Generate a favicon URL from a template and input URL
+ * @param opts - Options object
+ * @param opts.template - URL template with placeholders like {hostname}, {origin}, etc.
+ * @param opts.url - The URL to extract parts from
+ * @returns The hydrated favicon URL
+ */
+export function faviconUrl(opts: FaviconUrlOpts): string {
+  const u = new URL(opts.url);
+
+  return UriTemplate(opts.template).fill({
+    href: u.href,
+    origin: u.origin,
+    protocol: u.protocol,
+    username: u.username,
+    password: u.password,
+    host: u.host,
+    hostname: u.hostname,
+    port: u.port,
+    pathname: u.pathname,
+    hash: u.hash,
+    search: u.search,
+  });
+}
diff --git a/src/pages/DomainFeedPage.tsx b/src/pages/DomainFeedPage.tsx
index 41393ba0..1708621d 100644
--- a/src/pages/DomainFeedPage.tsx
+++ b/src/pages/DomainFeedPage.tsx
@@ -5,7 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
 import { NoteCard } from '@/components/NoteCard';
-import { DomainFavicon } from '@/components/DomainFavicon';
+import { ExternalFavicon } from '@/components/ExternalFavicon';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useFeedSettings } from '@/hooks/useFeedSettings';
 import { useAppContext } from '@/hooks/useAppContext';
@@ -104,7 +104,7 @@ export function DomainFeedPage() {
             <ArrowLeft className="size-5" />
           </button>
           <div className="flex items-center gap-2 min-w-0">
-            <DomainFavicon domain={domain ?? ''} size={20} />
+            <ExternalFavicon url={domain ? `https://${domain}` : undefined} size={20} />
             <div className="min-w-0">
               <h1 className="text-lg font-bold truncate leading-tight">{domain}</h1>
               {pubkeys && pubkeys.length > 0 && (
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index ef0ce80e..4c1828e0 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -14,7 +14,7 @@ import { useLayoutOptions } from '@/contexts/LayoutContext';
 import { ProfileRightSidebar } from '@/components/ProfileRightSidebar';
 import { NoteCard } from '@/components/NoteCard';
 import { ZapDialog } from '@/components/ZapDialog';
-import { DomainFavicon } from '@/components/DomainFavicon';
+import { ExternalFavicon } from '@/components/ExternalFavicon';
 import { Nip05Badge } from '@/components/Nip05Badge';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -426,7 +426,7 @@ function ProfileFieldInline({ field }: { field: { label: string; value: string }
   if (isUrl) {
     return (
       <div className="flex items-center gap-1.5 min-w-0">
-        <DomainFavicon domain={field.value} size={16} />
+        <ExternalFavicon url={field.value} size={16} className="shrink-0" />
         <span className="text-sm text-muted-foreground shrink-0">{field.label}</span>
         <a
           href={field.value}
diff --git a/src/test/TestApp.tsx b/src/test/TestApp.tsx
index 50921c34..b714e01f 100644
--- a/src/test/TestApp.tsx
+++ b/src/test/TestApp.tsx
@@ -57,7 +57,7 @@ export function TestApp({ children }: TestAppProps) {
     nip85OnlyMode: false,
     blossomServers: ['https://blossom.primal.net/'],
     defaultZapComment: 'Zapped with Mew!',
-    faviconProvider: 'https://favicon.shakespeare.diy/?url={href}',
+    faviconUrl: 'https://favicon.shakespeare.diy/?url={href}',
     corsProxy: 'https://proxy.shakespeare.diy/?url={href}',
     contentWarningPolicy: 'blur',
   };
diff --git a/src/types/uri-templates.d.ts b/src/types/uri-templates.d.ts
new file mode 100644
index 00000000..6110226e
--- /dev/null
+++ b/src/types/uri-templates.d.ts
@@ -0,0 +1,7 @@
+declare module 'uri-templates' {
+  interface UriTemplate {
+    fill(vars: Record<string, string>): string;
+  }
+  function UriTemplate(template: string): UriTemplate;
+  export default UriTemplate;
+}