Automatic Favicons for External links

This is a script from my archive. It is intended for inclusion in a web page, but it does something that is probably best done server-side. It’s customary in wikis to add an icon to indicate an external link. Why not use the favicon of the site you’re linking to? Attach to a test page with a lot of external links and modify the fourth line to put your domain name in.

Disclaimer: Transcluding images is generally bad practice. Amongst the downsides: you are taking someone else’s bandwidth, albeit a tiny amount; somebody could get their server to include a disgusting image in your site (not sure how disgusting you can be in 16×16 pixels). Anyway, with those caveats…)


<script type="text/javascript">
<pre>function linkIsSafe(u)
{if (u.substr(0,7)=='mailto:') return false; if
(u.substr(0,11)=='javascript:') return false;
if (u.indexOf('exampledomain')!=-1) return false; // Adapt this to weed out internal links
return true;
}

function imghilite()
{var n_to_open,dl,dll,i;
n_to_open=0; dl=document.links; dll=dl.length;
for(i = 0; i < dll; ++i)
{if (linkIsSafe(dl&#91;i&#93;.href)) ++n_to_open;}
if (n_to_open)
{for (i=0; i < dll; ++i)
if (linkIsSafe(dl&#91;i&#93;.href))
	{var img=document.createElement('img');
	img.style.display='none';
	img.height=img.width=16;img.style.border=0;
	img.src=dl&#91;i&#93;.href.split('/').splice(0,3).join('/')+'/favicon.ico';
	img.onload=img.style.display="inline";
	dl&#91;i&#93;.insertBefore(img,dl&#91;i&#93;.firstChild);
	}
}
};
</script>
</head>
<body onload="void(imghilite());"></code>
Advertisements

3 Responses to “Automatic Favicons for External links”

  1. Tom Gidden Says:

    You ask the question, “Why not use the favicon of the site you’re linking to?”… I think this is one of those times that “just because you can, doesn’t mean you should.”

    I see the uniform external-link icon as having a specific meaning: prepare for a mental context switch… going somewhere else now. Having lots of different pictures would be confusing (and possibly quite ugly too)

    The compromise I’d go with would be a set of *similar* icons indicating external links to a *small* set of standard sites: one for Wikipedia; one for Dictionary / Answers.com / Wordnet; one for Google; and then one for everything else.

    Oh, and also a cautionary one for going to YouTube and MySpace, which implicitly recommends muting speakers before clicking. (And a “boobies” one for NSFW links)

  2. Martin Poulter Says:

    Good points all, damn you. You spoil my fun! 🙂

  3. Martin Poulter Says:

    I’ve since found this post on Ask the CSS Guy which spells out a more elegant solution of using favicons, but only within part of your page such as a named list or div.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: