Funny how the cross-browser Favicon works

This is a solution for one of those extremely small details regarding your website: the favicon. Favicons are those semi-forgettable images that are actually a nice finishing touch on any website. But, do it wrong,it’ll end up a mess in your server logs or just plain won’t work everyone visiting your site.

I recently realized how pesky this lil’ file can be while walking a buddy through getting one setup on his site when I realized that I forgot some small but important details how to make one that works and doesn’t cause problems.

In short, whether you’re using a big framework or have your site entirely hardcoded (?), the simplest implementation of a favicon for your site is to add a tag to yourtag that points to your favicon.

No really, how do I display a favicon for my website?

This is a basic example…copy your favicon.ico file into the root directory of your web server, then, add this tag below to thetags of your site’s template (like so):

1
 

[Editor’s Note: yes, now my blog has one setup…thanks anonymous hacker news reader!]

But wait! That didn’t work!

Not so fast, kemosabe. You didn’t think that was it, did you?

No, this is the INTERNET where more than one web browser is in use. Therefore, more than one set of behaviors must be accounted for.

There are other requirements to take into account when designating a favicon, including the extension of the file you use (.ICO vs .GIF, etc.), the way you declare your icon using the tag, and, many other things.

Also, where your favicon is used also depends upon the browser of the kind folks visiting your website.

Some of the most common (but not universal) locations are: the address bar, the links bar, bookmarks, tabs and even when you drag a link to your desktop.

What about mobile devices? Specifically, all my apple fanboys? How do I make a nice ‘app’ looking icon on an iphone if someone bookmarks my site to their desktop?

With Apple’s shiny formatting:

1
 

Without Apple’s shiny formatting:

1
 

What you need to make this work:

  • a favicon.ico file (of the image you want to use)
  • put this file into the webroot directory
  • add that line of code into your head tags
  • empty your browser cache
  • load the page that has that tag

What if this doesn’t work?

  • you have firebug install, right? (install it now)
  • make sure the name of your favicon.ico file in your webroot correctly matches what you typed in the href attribute
  • make sure you didn’t add any subdirectories/path references in the href attribute (the file is in webroot, remember?)
  • empty your browser cache AGAIN
  • reload the page that has that tag

Okay, now it works on your site too – w00t!

Reference: http://en.wikipedia.org/wiki/Favicon

%d bloggers like this: