Daniel Morrison

Fun with Favicons

Fun with Favicons

While listing out sponsors for our upcoming Tech Embassy, I wanted a way to show some logos without spending too much time.

Enter the favicon, you know the ubiquitous icon that sits next to the URL in your browser window.

I wasn’t content to clutter my markup with links, however, so I did it all with JavaScript.

Here’s the resulting rendering:

The JS is pretty simple:

We simply iterate over the links, look for /favicon.ico, and add it as a background image to the left of the link. It has the nice side benefit of not showing a broken image if it can’t be found (hence all the missing ones in the image above).

Line 11 is a little bit of voodoo: CSS3 has support for background-size, which lets you resize the image. I needed this because one favicon was bigger than the typical 16×16px. This code works in current versions of FireFox and Safari 4. Other browsers aren’t so lucky, so use this at your own risk. In my case, the offending favicon wasn’t much of an issue, and I’m doing this for fun.

It would be nice if it would find favicons in locations other than /favicon.ico. It would be even nicer if everyone had apple-touch-icon.png files, but that’s a dream for another day.

1 Comment

  1. webhostingsphere — July 10, 2009

    Very cool idea Daniel! I had exactly the same idea. I wanted to feature 4 hosting sponsors using banners and the favicons. THanks for tip!