Highlight external links with favicons

Many sites like to apply distinct styling to their external links to let users know they will leave the site if they click on them. Wikipedia is a good example of this, using a blue box-arrow icon applied as a background image to links with the "external" class.

A slight more colourful approach would be to use the target website's favicon. This not only makes for an arguably more visually appealing design, but in certain circumstances, allows users to quickly see to which domain a link will probably take them:

BeforeAfter
External links styled with an icon (left) and with the target site's favicon (right)

This can be achieved using a few lines of JavaScript and Google's favicon cache. Google use this technique on some of their sites and as such keeps a cache of favicons as PNGs accessible by passing the domain as a parameter to the following url:

http://s2.googleusercontent.com/s2/favicons?domain_url=[DOMAIN]

So for example:

<img src="http://s2.googleusercontent.com/s2/favicons?domain_url=http%3A//semplicewebsites.com" width="16" height="16" alt="Favicon" />

gives our favicon: Favicon. It also gives a nice fallback icon when a favicon isn't found: Favicon

The code

To being with we need our HTML...

<a href="http://www.google.com" class="external">Google</a>

... and some CSS rules...

a.external {
  padding-left: 18px;
  background: url('http://s2.googleusercontent.com/s2/favicons') left center no-repeat;
}

This also defines the fall-back icon for when JavaScript is disabled.

Then we add our JavaScript. For this I will assume that you are using a JavaScript framework that allows you to select an element with a CSS selector. In this example I am using jQuery:

$('a.external').each(function() {
  var host = $(this)[0].host.replace(':80', '');
  $(this)[0].style.backgroundImage =
    'url("http://s2.googleusercontent.com/s2/favicons?domain_url=' +
    escape('http://' + host) + '")';
});

This code is added to the bottom of the page, or a page load event. ":80" is added to the a.host value by IE6, so this is removed as it unnecessary for searching the Google cache.

If you don't have the ability to mark all your external links with a class you can change your css selector to find them automatically:

$('a[href^=http]').each(function() {
  ...
  ...
});

All scripts are Public Domain.

Comments

[url=https://medium.com/@andreeramishin/моя-история-покупки-талисмана-удачи-money-amulet-20239dc0dfce]Money Amulet талисман удачи купить[/url] для тех, кто хочет много зарабатываеть.

[url=https://medium.com/@andreeramishin/моя-история-покупки-талисмана-удачи-money-amulet-20239dc0dfce]Money Amulet талисман удачи купить[/url] для тех, кто хочет много зарабатываеть.

Howdy! [url=http://onlinegenepharmacy.com/]drug medicine[/url] good internet site http://onlinegenepharmacy.com

cheap generic viagra buy generic viagra viagra generic brand [url=http://menedkkr.com/]viagra online[/url]

cheap generic viagra buy generic viagra viagra generic brand [url=http://menedkkr.com/]viagra online[/url]

price of viagra buy viagra online pharmacy viagra [url=http://onlineviaqer.com/]buy viagra[/url]

price of viagra buy viagra online pharmacy viagra [url=http://onlineviaqer.com/]buy viagra[/url]

buy tadalafil 20mg price buy cialis online liquid tadalafil [url=http://cialisserfher.com/]cialis online[/url]

buy cheap viagra online viagra viagra plus [url=http://bestbuymaleenhancement.com/]online viagra[/url]

buy cheap viagra online viagra viagra plus [url=http://bestbuymaleenhancement.com/]online viagra[/url]

viagra story viagra online purchase viagra [url=http://erectiledysfunctionmedicinesus.com/]viagra buy[/url]

Viagra En Angleterre [url=http://fzlaka.com]cheap cialis online[/url] Acheter Cialis En Tunisie Augmenten Vs Keflex Amoxicillin Clav

Viagra En Angleterre [url=http://fzlaka.com]cheap cialis online[/url] Acheter Cialis En Tunisie Augmenten Vs Keflex Amoxicillin Clav

Hello! [url=http://onlinepharmaciescanadarx.com/]cialis price at canada pharmacy[/url] [url=http://cialissmx.com/]cheap cialis in canada[/url] [url=http://canadianpharmacyonlinehq.com/]canadian drugstore online[/url] great web page

Hello! [url=http://onlinepharmaciescanadarx.com/]cialis price at canada pharmacy[/url] [url=http://cialissmx.com/]cheap cialis in canada[/url] [url=http://canadianpharmacyonlinehq.com/]canadian drugstore online[/url] great web page

Pages

Add new comment