By Sam Deering

jQuery Add Site Favicon to External Links

By Sam Deering
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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).

Here is how you do it!


     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);
      extImg.onload = function() { faviconIMG.attr('src', faviconURL); };
Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?