favicon

Small  JavaScript function to make it easy to render web page lists with favicons like this:

  jQuery home page

  Wikipedia page on favicons

  my academic home page

This is using the favicon for each site.  Rather than adding each image separately, a default image is initially included and the JavaScript substitutes the favicon if it exists.

See the live example page, which is small so easy to view source from1.

The HTML code to produce the above simply adds a class “favicon-fetch” to each image, and wraps each one in a link to the relevant site.

<a href="http://jquery.com/"><img class="favicon-fetch" style="border: 0;" src="unknown-favicon.png" alt="" width="16" /></a>
       <a href="http://jquery.com/">jQuery homepage</a>

Note “unknown-favicon.png” is a default image.  Any image can be used, it could be an invisible image, or something generic such as an image of a page.

Alternatively a special attribute “favicon-site” can be added to the <img> tag.

<img src="unknown-favicon.png" favicon-site="http://en.wikipedia.org/wiki/Favicon" width="16" />

Once the page has loaded,  favicon.js scans for these marked images, finds the favicon for each site and substitutes it. The fetching of the favicons is done asynchronously after the page has loaded, so does not slow down your page loading, and if a favicon is not found, it simply leaves the original default image.

For a small list like the above, this is a bit like overkill (simply locate the images by hand!), although dynamically accessing the images means they update when the site updates its favicon.  It is really most useful for automatically created lists, where it reduces server-side complexity and latency due time it would take to check for the icons during page delivery.

Note that this only checks for the default favicon.ico at the site root.  Some web pages specify a shortcut icon using a <link> tag in the page header. The JavaScript “same origin policy” makes it hard to access these dynamically without going through an AJAX server script.

In summary, the HTML to produce the above looks like:

...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.alandix.com/code/favicon/favicon.js"></script>
...
<a href="http://jquery.com/"><img class="favicon-fetch" style="border: 0;" src="unknown-favicon.png" alt="" width="16" /></a>
       <a href="http://jquery.com/">jQuery homepage</a>
<br />
<img src="unknown-favicon.png" favicon-site="http://en.wikipedia.org/wiki/Favicon" width="16" />
      <a href="http://en.wikipedia.org/wiki/Favicon">Wikipedia page on favicons</a>
<br />
<a href="http://www.alandix.com/"><img class="favicon-fetch" style="border: 0;" src="unknown-favicon.png" alt="" width="16" /></a>
       <a href="http://www.alandix.com/academic/">my academic home page</a>
...
<script type="text/javascript" language="javascript">
    loadFavicons(document);  // either at the end of the page body or in onload handler
</script>

The full JavaScript function is below at alandix.com/code/favicon/favicon.js.  It uses jQuery.find() to locate all the images with the relevant class, then looks for either the special ‘favicon-site’ attribute (first) or an immediately containing anchor tag.  If neither is found the image is silently ignored.  If a suitable web site is found, the default favicon location is checked at the site root by using a JavaScript image object.  Only if this succeeds is the actual image tag updated (by which point the image will also have been preloaded).

function loadFavicons(root) {
    $(root).find("img.favicon-fetch").each( function(index) {
        var site = $(this).attr('favicon-site');
        if ( ! site ) {
            site = $(this).parent().filter('a').attr('href');
        }
        if ( !site ) {
            return;
        }
        var match = site.match(  /(http(s)?://([^/]+)/)/  );
        if ( ! match ) {
            return;
        }
        domain = match[1];
        var favicon = domain + 'favicon.ico';
        var target = this;
        var image = new Image();
        image.onload = function() {
            $(target).attr('src',favicon);
        }
        image.src = favicon;
    });
}
  1. This blog page is actually using fixed images.  I may get round to doing a WordPress plugin, just needs to include the relevant Javascript files and shortcode …[back]

4 thoughts on “favicon

  1. Pingback: Alan’s blog » spice up boring lists of web links – add favicons using jQuery

  2. You code is expecting the favicon.ico file right after the domain name. I came recently to this building my FF extension and found many examples where this is not he case. Your code will not return an image if:
    – favicon is not in a regular place (just after the domain name e.g. http://my.domain.com/images/favicon.ico)
    – favicon is not in ico format (often they are in png e.g. favicon.png) and
    – favicon uses a random name (e.g. thatsmallimage.png ;))

    Unfortunately there is no (enforced) standard for placing and naming favicons. The only thing we can count on is that people follow best practices.

    One better way is to find the tag of a particular page and extract the path and name of favicon image.

    There are also a few services that can return favicons but I did not look at how they do it:
    http://getfavicon.appspot.com/http://www.alandix.com
    http://grabicon.com/alandix.com
    http://www.getfavicon.org/?url=www.alandix.com
    http://www.google.com/s2/favicons?domain=www.alandix.com

  3. Thanks Matjaz, yep it is only looking for the default favicon. Pages also indicate a favicon using a link meta rag in the page header. For example, my academic home page at http://www.alandix.com/academic/ has the following:

    <link rel=”shortcut icon” href=”faviconb-16.ico” type=”image/x-icon” />

    This points to the image at http://www.alandix.com/academic/faviconb-16.ico

    Now-a-days this is redundant because it is identical to the default favicon at http://www.alandix.com/favicon.ico (which is being picked up by this blog!). However originally this page was at http://www.comp.lancs.ac.uk/~dixa/ and so would have ended picking up the default computing department favicon without the explcit link tag.

    In order to find this tag you need to scan the web page headers, but as I mentioned briefly, normal client-side Javascript cannot access this due to the same origin policy.

    Sadly none of the above services do this (just tried them all), they all seem to either fail if given a full URL, or simply pick up the default favicon (even the google one!).

    The little server-side script to do it properly is simple, so if I get an idle evening …

  4. Pingback: Persistent Inappeasable Mind

Leave a Comment

Your email address will not be published. Required fields are marked *