For the past couple of weeks, I have worked on creating a PHP library to create ICO files. This has been difficult as all the documentation for the ICO format is either sparse or not completely documented.

I’m doing this since I have yet to find a way of creating a valid favicon file using just PHP and PHP’s GD library. Sure, I can create a PNG file and change the extension to “.ico”, but that doesn’t work in all browsers, on all operating systems (such as Windows XP), and is more of a hack than a valid method for creating favicon files.

So, it is time to make one. I have a placeholder github repository named php-ico.

The primary goal is to make a robust, reliable library that creates valid ICO files that can be properly rendered on Windows XP+ and all the major browsers. Thus, my initial goal is not to support every format that exists nor is it to support parsing the ICO files. If the project gets enough attention, I’ll look at expanding the scope.

Here are the resources that I’ve found helpful as I’ve worked on this project:

• ICO (file format) – Wikipedia article about the ICO file format. This has a very comprehensive description of the ICO header. It is sparse on details about the format of the image data.
• BMP file format – Wikipedia article about the BMP file format. This helped me understand the headers and pixel data format for the BMP image data.
• Portable Network Graphics – Wikipedia article about the PNG file format. This gave me what I needed to know to identify PNG image data.
• Windows Bitmap File Format – Very good article that delves into more details about the BMP file format. The extra details about the different types of headers, compression methods, compression encoding, and examples were very helpful.
• Icons – A Microsoft Developer Network article from 1995 that provides the original ICO file format spec. While this is the most authoritative, I really didn’t find this to be as much help as other sources.
• Replacing ICON resources in EXE and DLL files – Article from The Code Project that has a breakdown of the format similar to what is found in the MSDN article. Example C code is provided.
• Support Vista-style ICO files – Mozilla Bugzilla filed bug. The discussion has some great information about methods used to reliably parse varying ICO formats and structures. It also has some good test ICO files to try.
• Convert HBITMAP to .ICO file – This Chironex Software blog post provided the last piece I needed: how to structure the opacity mask data. Where he found this information (since I didn’t find it in any of the above articles) I haven’t a clue.

If this post gets some traction and interest, I’ll consider putting together a post detailing all the different pieces I’ve found here. I’m not a spec writer, but I’d try my best. Let me know if you’d like to have me work on this.

Google’s original capital G favicon was around for, I don’t know, forever. Around June, they changed it to a lowercase g. I know that many people threw up their hands in disgust, but I actually liked it. It looked very clean and neat. However, they recently changed the favicon yet again.

Now Google’s favicon is this very colorful icon with green, blue, yellow, and red colors from their logo. I don’t necessarily dislike this new favicon, but I simply don’t and can’t associate it with Google. Google has always been represented by clean simplicity. They don’t need wizbang fancy images because they are simply good and don’t need to be fancy to attract people.

I think that’s why I liked the simple blue and white icon, even when they changed it. It was simple, to the point, laconic even; It was, in a word: Google.

Now when I have numerous Google tabs open, I look up at my tabs and just can’t help but think, “what is that site and why do I so many tabs of it?” I tried getting used to it, but I simply cannot. So, I decided that I would find a way to do something about it.

Enter Greasemonkey and a fantastic userscript simply called Google’s Old Favicon. Now, I have to say, that the creator of this script, !user, did a fantastic job not just with the script but with the name of the script as well. “Google’s Old Favicon”? Genius. The name itself is simple, to the point, and not looking to pretend to be more than pure, efficient utility.

Anyways… Enough gushing about names and ranting on. Back to the task at hand.

This script is written in Javascript, but it requires Greasemonkey. Let’s take care of that first.

Installing Greasemonkey

Greasemonkey is a Firefox add-on. As such, you need to install it in Firefox before it will work. Simply visit the Greasemonkey add-on page, click “Add to Firefox”, click the “Install Now” button, and click the “Restart” button when the install is complete. When Firefox restarts, you will have a nice new shiny plugin to play with.

Wasn’t that easy? You have to love the simplicity of Firefox add-ons.

Now it’s time for the userscript (this is what Greasemonkey scripts are called).

Installing Google’s Old Favicon

If you’re new to Greasemonkey, installing a userscript will seem a bit odd. There is a helpful document on the Greasespot wiki that details how to use Greasemonkey in detail. I don’t intend to try to reproduce that; rather, I just intend to give you enough information to get Google’s Old Favicon going.

Once you have Greasemonkey loaded, you can simply click this link to install the Google’s Old Favicon userscript. When you click the link, Greasemonkey will pop up a dialog. Click the “Install” button when it appears to install the userscript in Greasemonkey. You’re done, now the userscript is ready to go.

Now it’s time to load up a new tab and look at the results.

By default, the original capital G favicon is used. If you’re like me and wish to use the old lowercase g favicon, you can do that by modifying the userscript.

1. Go to Tools > Greasemonkey > Manage User Scripts
2. Highlight “Google’s Old Favicon”
3. Click “Edit”
4. If you haven’t modified a Greasemonkey userscript before, a file dialog will appear in order for you to pick your preferred editor.
   • If you’re running Linux and are running GNOME (which is what Ubuntu runs by default), you can type in “/usr/bin/gedit” to use Gedit, the default text editor in GNOME.
   • If you’re running Windows, you can use “C:\Windows\notepad.exe” to use Notepad, the deafult text editor in Windows.
5. Once the userscript is loaded in the editor of your choice, simply change this line:
   const EDITION = 0;
   To:
   const EDITION = 1;
6. Then you just need to save the file and close the editor

The change takes effect immediately.

Enjoy your new, make that old, Google favicon.

Closing Thoughts

By duplicating this script and customizing it, you can use it to apply custom favicons to any of your sites.

Greasemonkey can offer an amazing array of options that allow you to not only modify the way your browser behaves but to modify the pages that are loaded as well. I highly recommend that you look around Userscripts.org and see what different kind of scripts are available.