Favicons

alan — Thu, 17 Sep 2009 05:33:44 +0000

my blog_Favicons

17.09.2009

A favicon is that little icon that appears in the left-hand side of the address bar of your browser when you visit a website, or in your bookmarks menu if you bookmark it, or on the tab if you are using a browser with tabs. Creating a good favicon is an important part of developing a website, since that icon is the most frequently-visible representation of your website. If you design it right, just seeing it will make your site pop into someone's mind when they open their bookmarks. If you get it wrong, or don't bother with it at all, you've missed an opportunity to make your site stand out just a little bit more.

The favicon is often a tiny version of a company's logo, but you can have a bit more fun with it than that. In fact, it's amazing just what people have been able to do within that 16x16 pixel space. You might not consider yourself much of a graphic artist, but the proliferation of online tools for web developers means that you don't have to be. A site I've been using a lot is Favicon.cc, an online favicon generator for static or animated icons. You can import from an image file as a starting point, or design a favicon from scratch. If you have a logo image, then generating a favicon is as simple as importing the logo and clicking a button. Take your new favicon.ico file, drop it into the root of your website directory, and hey presto! The boring default "blank" icon that people saw in their address bars when visiting your site is replaced by something a bit more eyecatching.

As of the time of writing, I've been experimenting with creating animated favicons, and I'm using one on this site. It's a close-up of my eye (imported from a digital photo), with a differently-colored iris in each of the 4 frames of the animation. Slightly cheesy but it made me smile. I've got 15 tabs open in my browser and mine is the only one with a moving favicon, so it stands out.

The main catch is that browsers differ significantly in their implementation of favicons. Internet Explorer doesn't seem to support animation at all, and has problems with transparency, while other browsers, e.g. Opera and Safari, also don't display the animated favicon on my site, and therefore may require different code. If you want to explore this in more detail, you could try clicking here, or here, or maybe here. The good news? The animations work in Firefox, and it's only a matter of time before the other browsers follow suit.

One last note: I work mainly with Drupal, and it's shocking how many Drupal websites out there still use the out-of-the-box default Drupal favicon. It just doesn't look professional in my opinion.

browser hell