CSS-only External Link Favicons

January 21, 2022

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

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).

Tags: Project

< Newer
Older >

Zach Leatherman is a builder for the web at Font Awesome and the creator/maintainer of Eleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 86 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

17 Reposts

75 Likes

8 Comments

Brad Czerniak solves it once!
22 Jan 2022

It'd be cool if you could concatenate attr(href) into the favicon url so each site doesn't need an attribute selector.
Nikhil Mehta
22 Jan 2022

Wondering how would screen readers treat that?? Any idea. 🤔
Aleksandr Hovhannisyan
22 Jan 2022

This is really clever! Love it. If only browsers could lazily load CSS background images too 😞 Still pretty cool.
Camdyn Rasque
24 Jan 2022

This is pretty slick! Curious - any reason not to use the website's default /favicon.ico route?
Zach Leatherman
24 Jan 2022

it does! github.com/11ty/api-indie…
Dym Sohin 🦾🤡
25 Jan 2022

the [href*="twitter.com"] is rather unsafe as it can masquerade a deliberately fake.com/?ref=twitter.c… .
David Bushell ????
28 Oct 2025

@zachleat could I interest you in my new favicon-as-a-service startup ????
Zach Leatherman :11ty:
28 Oct 2025

@db @Edent had a few listed on their latest blog post: https://shkspr.mobi/blog/2025/10/a-self-hosted-favicon-proxy-written-in-php/ A Self-Hosted Favicon Proxy written in PHP