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^="https://twitter.com"]:before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  width: 1em;
  height: 1em;
  margin: 0 .2em;
  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).


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

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. 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 »

17 Reposts

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

73 Likes

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🛸
6 Comments
  1. Brad Czerniak solves it once!

    @ao5357

    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

    @technikhil314

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

  3. Aleksandr Hovhannisyan

    @hovhaDovah

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

  4. Camdyn Rasque

    @CamdynRasque

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

  5. Zach Leatherman

    @zachleat

    it does! github.com/11ty/api-indie…

  6. Dym Sohin 🦾🤡

    @dym_sh

    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 webmention.io.

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)