🌐 Favicon Avatar Service

Add the following CSS to display favicons before external links:

a[data-favicon]:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin: 0 .2em;
  background-size: contain;
  background-image: var(--favicon-url);
}

And use this JavaScript snippet:

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("a[href^='http']").forEach(link => {
        let url = new URL(link.href);
        let faviconUrl = "/avatar/" + encodeURIComponent(url.origin) + "/";
        link.style.setProperty('--favicon-url', `url(${faviconUrl})`);
        link.setAttribute("data-favicon", faviconUrl);
    });
});