As not all website are having a favicon, I added some stuff to check if the favicon is properly loaded.
If not, the background-image should not be changed, and remains the default image I use to indicate external links.

My inner code block looks like this:

var favicon = href.replace(/^(http:\/\/[^\/]+).*$/, ‘$1′) + ‘/favicon.ico’,
img = new Image();

img.onload = function(){
a.setStyle(‘background-image’,'url(‘ + favicon + ‘)’);
}
img.src = favicon; //load it now.

Just use uri.set(‘value’, ‘/favicon.ico’); Set value will take relative paths.

window.addEvent(‘domready’,function() {
var host = window.location.host;
var links = $$(‘a’);
links.each(function(elem,i){
var myURI = new URI(elem.get(‘href’));
var hostExtern = myURI.get(‘host’);
if(hostExtern!=host) {
elem.addClass(‘web’);
}
})
})

window.addEvent(‘domready’,function(){
var baseHost = URI.base.get(‘host’);
$$(‘a[href^="http://"]‘).each(function(a){
var uri = new URI(a);
if(baseHost != uri.get(‘host’)){
var favicon = new URI(‘/favicon.ico’, { base: uri });
a.setStyle(‘background-image’,'url(‘ + favicon + ‘)’).addClass(‘favicon’);
}
});
});