Skip http favicon on https pages

src/components/common/Favicon.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useConfig } from '@/components/hooks';
 import { FAVICON_URL, GROUPED_DOMAINS } from '@/lib/constants';
 
@@ -16,24 +16,34 @@ export function Favicon({ domain, ...props }) {
 
   const hostName = domain ? getHostName(domain) : null;
   const domainName = hostName ? GROUPED_DOMAINS[hostName]?.domain || hostName : null;
-  const primaryUrl = hostName
+  const candidates = useMemo(() => {
-    ? config?.faviconUrl
+    if (!domainName) {
-        ? config.faviconUrl.replace(/\{\{\s*domain\s*}}/, domainName)
+      return [];
-        : `https://${domainName}/favicon.ico`
+    }
-    : null;
+
-  const fallbackUrl = hostName
+    const urls = [`https://${domainName}/favicon.ico`];
-    ? FAVICON_URL.replace(/\{\{\s*domain\s*}}/, domainName)
+
-    : null;
+    if (globalThis?.location?.protocol !== 'https:') {
-  const [src, setSrc] = useState(primaryUrl);
+      urls.push(`http://${domainName}/favicon.ico`);
+    }
+
+    if (config?.faviconUrl) {
+      urls.push(config.faviconUrl.replace(/\{\{\s*domain\s*}}/, domainName));
+    }
+
+    urls.push(FAVICON_URL.replace(/\{\{\s*domain\s*}}/, domainName));
+
+    return urls;
+  }, [config?.faviconUrl, domainName]);
+  const [index, setIndex] = useState(0);
+  const src = candidates[index] || null;
 
   useEffect(() => {
-    setSrc(primaryUrl);
+    setIndex(0);
-  }, [primaryUrl]);
+  }, [candidates.join('|')]);
 
   function handleError() {
-    if (src && fallbackUrl && src !== fallbackUrl) {
+    setIndex(current => (current + 1 < candidates.length ? current + 1 : current));
-      setSrc(fallbackUrl);
-    }
   }
 
   return hostName && src ? (