JavaScript
Article

jQuery Add Site Favicon to External Links

By Sam Deering

It may be the case that you want to make all external links on your page visible to the user. It might be that you want to use the the favicon.ico of the external site that your linking to (if it is available).

http://jQuery4u.com

Here is how you do it!

jQuery('a[href^="http://"]').filter(function(){
     return this.hostname && this.hostname !== location.hostname;
}).each(function() {
    var link = jQuery(this);
	//assuming it's in the root directory
    var faviconURL =
      link.attr('href').replace(/^(http://[^/]+).*$/, '$1')+'/favicon.ico';
    var faviconIMG = jQuery('')['appendTo'](link);
    var extImg = new Image();
    extImg.src = faviconURL;
    if (extImg.complete)
      faviconIMG.attr('src', faviconURL);
    else
      extImg.onload = function() { faviconIMG.attr('src', faviconURL); };
});

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.