CSS-only External Link Favicons

Saw a fascinating idea in a tweet from @simevidas to show favicons on external links on a site. Full credit for the original idea to Kiko Beats.

The implementation used an icon font to store the favicons. I think we can improve on this idea (do y’all want to maintain an icon font 😅) to save some future maintenance using IndieWeb Avatar. This will allow the images to auto-update when a site updates their favicon (per server caching rules).

Add this CSS to see it in action:

a[href^="https://twitter.com"]:before {
  content: "";
  display: inline-flex;
  vertical-align: text-bottom;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-image: url("https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.twitter.com%2F/");
}

Demo

• wikipedia.org
• google.com
• zachleat.com
• netlify.com
• 11ty.dev

Bonus

Add <link href="https://v1.indieweb-avatar.11ty.dev" rel="preconnect" crossorigin> if these images are in your critical rendering path (tip: you should try to not do this).