Example of Hyperlink Cues with Favicons

On this page, the javascript looks for every link on the page to see if the href starts with "http:", which would indicate that it's an external link. If so, and if the link also does not start with http://www.askthecssguy.com, it grabs the favicon off that domain name and inserts it after each link. If no favicon exists, it uses a locally stored image (external gif here) to indicate the link is external.

I hate Edna Garret. Some television shows are worse than the commercials that sponsor them. Anybody as sick of Lost as I am? Here is an example link to a local file, though no file exist, and the link does not start with http. Here's a site http://www.reasonstation.net/ with no favicon.

www.askthecssguy.com: This link should not show a favicon. I've assigned links with "http://www.askthecssguy.com" to be overlooked. This is helpful on sites that link to other pages on the same site using the full url. The modifications to make this happen are in bold:

function faviconize() { 
  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  var links = document.getElementsByTagName("a");
  	for (var j=0; j<links.length; j++) {
  		var hoststring = /^http:/;
  		var localdomain = "http://www.askthecssguy.com";
  		var hrefvalue = links[j].getAttribute("href",2);
		if ((hrefvalue.search(hoststring) != -1) && (hrefvalue.indexOf(localdomain) == -1)) {
			var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
			domain = RegExp.$2;
			var cue = document.createElement("img");
			cue.className = "faviconimg";
			var cuesrc = "http://"+domain+"/favicon.ico";
			cue.setAttribute("src",cuesrc);
			cue.onerror = function () {
				this.src = "external.gif";
				}
			insertAfter(cue,links[j]);
		}
	}
}
addLoadEvent(faviconize);

Safari browser won't show the generic external link image because it doesn't support onerror.

For sake of demonstration, and to make it easy for you to view source for everything, both CSS and JavaScript are in the head of this document. In real-world implementation, it is best practice to use external files for each when possible.