Hyperlink Cues with Favicons

I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic ‘external link’ icon, we showed that site’s favicon?

Instead of this:

or this:

Do this:

The favicon gives the reader something to recognize if they are already familiar with the destination site, and if not familiar, something new to associate with it. It’s similar to the way a feed reader, or a bookmark list, might show sites.

The method to do this requires some CSS, but the most of the magic happens with JavaScript.

Note: I’m no JavaScript guy, and I can say with great confidence that there are more efficient and fool-proof ways to accomplish some things I put forth. If you know how the JavaScript mentioned here can be improved, please let me (and everybody) know.

On with the show.

English before JavaScript

First I wrote out what I wanted to happen in English:

  1. Look for links on the page.
  2. If the link points to some other site, grab the favicon off that site.
  3. Place the favicon next to the link.

Considerations

  • Favicons are easy to get. If a favicon exist, I can always count on it being in a predictable spot: it’s always right off the root of a domain, like this: http://www.askthecssguy.com/favicon.ico. For this reason, there’s no need to store favicons locally.
  • Not all sites have a favicon. Though most of the sites I regularly visit have a favicon, not all do. In those instances, I could either show nothing, or have a generic image to indicate that a link is external.
  • Not all favicons are the same size. Some are 16×16 pixels. Some are bigger. Yet I want all the favicons to have consistent dimensions. For this reason, I don’t want to call the image as a CSS background image, since currently-supported CSS doesn’t allow for resizing of background images. I’ll have to call the image using the img tag, and style it with the dimensions I want.

Examples

View example pages and view source to see code.

  • Faviconize Everything (View Page »)

    The script will scan every link on the page and place favicons after any links that point off site, resulting in:

  • The favilist (View Page »)

    The script will only attach the favicons to links within ul class="favilist", resulting in:

  • The favilist 2 (View Page »)

    Same as above, but showing favicons at ‘full-size’ 16×16, so bigger text, too, resulting in:

  • Faviconize Divs with Class (View Page »)

    Only works on links within a div tag of a specified class.
  • Faviconize Divs and excluding a domain (View Page »)

    I modified the ‘faviconize all’ script so that it will overlook a domain name of your chooseing. If you never want to faviconize pages that link to other pages on your own site, but your blog engine always puts absolute urls in your links, this might be helpful.

Room for Improvement

Here are some known problems. If you can help me solve them, please let me know!

  1. Safari doesn’t support the javascript onerror event. If a favicon doesn’t exist, it’s the onerror event that tells the browser to use the standby “external link” image instead. For Safari, I just get a blank spot instead of my standby image.
  2. The regular expression I’m using to grab the domain name out of my link is far from the best one to use. I suck at regular expressions, and after hunting through tutorials with examples, I found one that worked, but it’s got all this extra nonsense. It would be best to have one catered to my specific use. I just need to grab the domain from a link, like “www.wikipedia.org” from “http://en.wikipedia.org/wiki/Favicons”.
  3. Resized images are not ideal anyway, but they really look like ass in Internet Explorer.

Dec 30, 2006: Added example for only faviconizing div tags with a specified class.

Dec 30, 2006: I decided to drink my own kool-aid and introduced this effect in my comments. If commenters left a URL, their name becomes a hyperlink to that URL, and the faviconize script should then show the favicon of that URL if one exists.

Dec 31, 2006: I added another example. The new example shows how to modify the javascript so that you can specify a domain that will be ignored during the faviconization. (word?)


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


If you want the script to skip anchor links like that, you can change the following line:
if (hrefvalue.search(hoststring) != -1) {
into
if (hrefvalue && hrefvalue.search(hoststring) != -1) {
This way the code only executes if the hrefvalue exists, and it should therefore skip links the one you describe.

shawn said:
Bit of caution, this
cue.onerror = function () {
this.src = “external.gif”;
}
will cause an infinite loop if external.gif also errors for some reason.
Also you are setting localdomain = in every iteration of your for loop. I would declare it before the loop.

Instead of relying on onError, create your IMG tag as a DomElement, using your ‘default’ placeholder image. Then go away and fetch the favIcon, and if you don’t find one, your image still contains the default image, otherwise swap out the SRC attribute in your new dom element. THEN add it to the document.

JAM said:
hey, great post. while i was fiddling with it, i noticed that you can completely remove the regex. instead of
var domain = hrefvalue.match(/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/);
domain = RegExp.$2;
you could write
var domain = links[j].hostname
tested in ie8, ff3.5 & o10. mostly should work with before version