CSS-only External Link Favicons

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*="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).


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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*="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).


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2022-01-21T00:00:00+00:00) CSS-only External Link Favicons. Retrieved from https://www.scien.cx/2022/01/21/css-only-external-link-favicons/

MLA
" » CSS-only External Link Favicons." Zach Leatherman | Sciencx - Friday January 21, 2022, https://www.scien.cx/2022/01/21/css-only-external-link-favicons/
HARVARD
Zach Leatherman | Sciencx Friday January 21, 2022 » CSS-only External Link Favicons., viewed ,<https://www.scien.cx/2022/01/21/css-only-external-link-favicons/>
VANCOUVER
Zach Leatherman | Sciencx - » CSS-only External Link Favicons. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/21/css-only-external-link-favicons/
CHICAGO
" » CSS-only External Link Favicons." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2022/01/21/css-only-external-link-favicons/
IEEE
" » CSS-only External Link Favicons." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2022/01/21/css-only-external-link-favicons/. [Accessed: ]
rf:citation
» CSS-only External Link Favicons | Zach Leatherman | Sciencx | https://www.scien.cx/2022/01/21/css-only-external-link-favicons/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts