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

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Trailing Slashes on URLs: Contentious or Settled?
Next
Eleventy v1.0.0, the stable release.

17 Retweets

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:

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)