Favicons Next To External Links

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

Unless we make a custom CSS selector for every single site we want to do this for, CSS isn’t capable of yanking the href off links and using it to plant a favicon next to the link. But if we involved a smidge of JavaScript, we can get it done.

The “I Wish” CSS Only Technique

What would be nice is if you had simple semantic HTML like this:

<a href="https://github.com">GitHub</a>

And then you could access everything you needed to insert a background image of the favicon using a service like getFavicon.

/* Fair warning, this doesn't work */

a[href^="http://"]::before {
  content: url(https://g.etfv.co/ + attr(href));
}

Maybe the syntax wouldn’t be exactly like that, but something like it. The point is, you can’t mix up the url() syntax into parts like that in CSS.

Google’s Favicon Service

Google has it’s own favicon service you can use. For example:

https://www.google.com/s2/u/0/favicons?domain=css-tricks.com
Update: thats broken now. You can use Grabicon instead now though.
Update: Grabicon requires a referrer apparently now which makes it fail in a variety of circumstances. Heidi Pungartnik pointed out Google’s service still exists, it’s just moved URL’s slightly. Example: https://www.google.com/s2/favicons?domain=css-tricks.com

Automating

The trick is you need just the hostname and TLD and nothing else. I searched around and found a simple regex for getting that from any URL. We’ll need that because links aren’t always (or even usually) the root of sites.

function getDomain(url) {
  return url.match(/:\/\/(.[^/]+)/)[1];
}

Using these things, and jQuery, we’ll find all links and apply the favicon as a background image. The external link checking is pretty rudimentary, but there are more robust methods here if need be.

$("a[href^='http']").each(function() {
  $(this).css({
    background: "url(http://www.google.com/s2/favicons?domain=" + getDomain(this.href) + ") left center no-repeat",
    "padding-left": "20px"
  });    
});

Then @travis reminded me that you can just use this.hostname instead of the fancy regex. So:

/* Nothing else needed */
$("a[href^='http']").each(function() {
  $(this).css({
    background: "url(https://www.google.com/s2/favicons?domain=" + this.hostname + ") left center no-repeat",
    "padding-left": "20px"
  });    
});

I’m not sure what the browser support is for hostname, whether it’s just as good as href or less so, not sure.

getFavicon Method

Update: This service appears to be gone. Just leaving up for posterity.

@seanodotcom showed me another similar service galled getFavicon.

It’s hosted by Google AppEngine, but it’s not Google’s own service. I did find it a bit slower. But the advantage being that you don’t need to deal with host names at all, you just give them the full URL.

So then it becomes:

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(https://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});​

View Demo

Performance?

As I’m sure you know, the number of HTTP requests a page makes is a huge deal in performance. Each little image in these techniques are one page request each.

@yuritkanchenko pointed out to me a cool favicon service that can automatically sprite the favicons for you so you can keep it to one request.

For instance:

http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com

I’m afraid I didn’t go the extra mile here and write the JavaScript needed to find all links, concatenate the domains, make the request, and then apply the images as a sprite, but I’m sure you could whip that up pretty quick if you really needed it.