first commit

common/resources/client/ui/remote-favicon.tsx

@@ -0,0 +1,43 @@
+import {isAbsoluteUrl} from '../utils/urls/is-absolute-url';
+import memoize from 'nano-memoize';
+import clsx from 'clsx';
+
+interface RemoteFaviconProps {
+  url: string;
+  className?: string;
+  size?: string;
+  alt?: string;
+}
+export function RemoteFavicon({
+  url,
+  className,
+  size = 'w-16 h-16',
+  alt,
+}: RemoteFaviconProps) {
+  if (!url) {
+    return null;
+  }
+
+  const src = getFaviconSrc(url);
+
+  return (
+    <img
+      className={clsx(size, className)}
+      src={getFaviconSrc(url)}
+      alt={alt || `${src} favicon`}
+    />
+  );
+}
+
+const getFaviconSrc = memoize((url: string): string => {
+  if (url.includes('youtube')) {
+    return 'https://www.youtube.com/s/desktop/ca54e1bd/img/favicon.ico';
+  }
+
+  // relative url to current site
+  if (!isAbsoluteUrl(url)) {
+    url = `${window.location.protocol}//${window.location.host}`;
+  }
+  const domain = new URL(url).origin;
+  return 'https://www.google.com/s2/favicons?domain=' + domain;
+});