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).
6 Comments
@ao5357
It'd be cool if you could concatenate attr(href) into the favicon url so each site doesn't need an attribute selector.
@technikhil314
Wondering how would screen readers treat that?? Any idea. 🤔
@hovhaDovah
This is really clever! Love it. If only browsers could lazily load CSS background images too 😞 Still pretty cool.
@CamdynRasque
This is pretty slick! Curious - any reason not to use the website's default /favicon.ico route?
@zachleat
it does! github.com/11ty/api-indie…
@dym_sh
the [href*="twitter.com"] is rather unsafe as it can masquerade a deliberately fake.com/?ref=twitter.c… .