I recently worked on some code dealing with favicons (a.k.a., favorite icons, those little 16x16px icons displayed in web-browsers for a specific site). I was writing some Java that read favicons from various sites, and cached them in a database for a set of users. Come to find out, not all sites use the .ico (Icon) file format for their favicons. Some sites use the PNG file format, but name the favicon file with a .ico extension. I suppose this improper naming is a misunderstanding of the W3C documents which explain how you can declare a favicon using a <link> tag. However, in the real-world (the non-Windows world), the file extension does not necessarily define the file type so I guess it's OK. Continue reading to find out how to easily create .ico files using the convert command from ImageMagick, and how to get the favicon to properly load with your site.
Using the convert command on Linux (part of the ImageMagick package), you can easily convert between one graphic file format and another. In my case, I created a 16x16px PNG file in Photoshop that I wanted to convert into a .ico file. Here's how:
#/> convert favicon.png favicon.ico
Seriously, that's it. The convert command is amazing. There are many other options for this command, so be sure to check the man-page. If you don't have convert installed on your Linux box, chances are all you need is the ImageMagick package (yum install ImageMagick on CentOS and Fedora).
Step two, once I had the favicon.ico file I placed it at the root of my site (http://mark.koli.ch/favicon.ico). I then added the following <link> tags to the <head> of each HTML document:
<link rel="icon" href="http://mark.koli.ch/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://mark.koli.ch/favicon.ico" type="image/x-icon" />
This method seemed to work fine for Firefox/Mozilla, but (of course) I couldn't get the icon to load in IE7. So, I dug into how google.com handles it, and it appears that they use a small bit of JavaScript to create a new Image object which essentially preloads their favicon file. Based on that model, here's what I'm using:
(new Image).src="http://mark.koli.ch/favicon.ico";
I've placed this in the $(document).ready function of my jQuery code, so the favicon image is preloaded when the DOM is loaded. After all this, it appears my favicon finally loads correctly each time in Firefox and IE7.
#/> convert favicon.png favicon.ico
Seriously, that's it. The convert command is amazing. There are many other options for this command, so be sure to check the man-page. If you don't have convert installed on your Linux box, chances are all you need is the ImageMagick package (yum install ImageMagick on CentOS and Fedora).
Step two, once I had the favicon.ico file I placed it at the root of my site (http://mark.koli.ch/favicon.ico). I then added the following <link> tags to the <head> of each HTML document:
<link rel="icon" href="http://mark.koli.ch/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://mark.koli.ch/favicon.ico" type="image/x-icon" />
This method seemed to work fine for Firefox/Mozilla, but (of course) I couldn't get the icon to load in IE7. So, I dug into how google.com handles it, and it appears that they use a small bit of JavaScript to create a new Image object which essentially preloads their favicon file. Based on that model, here's what I'm using:
(new Image).src="http://mark.koli.ch/favicon.ico";
I've placed this in the $(document).ready function of my jQuery code, so the favicon image is preloaded when the DOM is loaded. After all this, it appears my favicon finally loads correctly each time in Firefox and IE7.
Did you find this post helpful, or at least, interesting?