Zach’s ugly mug (his face) Zach Leatherman

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^=""]:before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  width: 1em;
  height: 1em;
  margin: 0 .2em;
  background-size: contain;
  background-image: url("");



Add <link href="" rel="preconnect" crossorigin> if these images are in your critical rendering path (tip: you should try to not do this).

< Newer
Trailing Slashes on URLs: Contentious or Settled?
Older >
Eleventy v1.0.0, the stable release.

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


Baldur BjarnasonMWDelaneyLynn FisherRyan MulliganErik (TrioNTech 💉💉💉)Aleksandr HovhannisyanTom Hazledine#!/kiko/beatsStefan MateiGiammaJakub IwanowskiIndieWeb Avatar for https://www.alvinashcraft.comJoel MossJosh CollinsworthIndieWeb Avatar for https://aarontgrogg.comIndieWeb Avatar for https://ibrahimnergiz.comMichael Scharnagl


Marty McGuireDave 🧱JamCowGeoff RichRodney PruittCédric AellenBrian SinclairEric WallaceCamdyn Rasquejulien darribauMax BöckEthan Anderson 🚢 🌊Matt StrömJosh Collinsworthhenry ✷R λ 2Chris PizzinatoFynn BeckerJoshua KinalPaul Melero 💚✉️hfsp.ethAlex CarpenterJakub IwanowskiGiammaJen GorfineR EngelSeth MesserStefan MateiGeorge BoobyerJens GeilingMichael GearonDavid Hund ✌rosslpArpitLevi CeccatoDavid LeiningerTom HazledineJakeAleksandr HovhannisyanArne SierensDylan SmithDikachukwu👁bertrandkellerTitouan MathisBenSanti CrosBart VenemanEthan EisenhardamberleytanangularErik (TrioNTech 💉💉💉)Markos GiannopoulosMattChris JohnsonJohn Henry Müller⌁ IanRyan MulliganJJLynn FisherScottJavan MakhmaliPrince WilsonBrad Czerniak solves it once!Bernhard MayrMWDelaneyEoin O'DwyersnzroBarreto.jsParkerBond usePrivilege(stopRacism)xdevelxDerek🛸
  1. Brad Czerniak solves it once!


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

  2. Nikhil Mehta


    Wondering how would screen readers treat that?? Any idea. 🤔

  3. Aleksandr Hovhannisyan


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

  4. Camdyn Rasque


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

  5. Zach Leatherman


    it does!…

  6. Dym Sohin 🦾🤡


    the [HREf*="tWiTter.cOM"] iS rathEr UNSAFe As It can MaSqueRade A DeLIbErATELY faKE.cOm/?rEF=twITteR.c… .

Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)