Tutorial Thursday

To make your site look professional you probably want to have a nice favicon. A favicon is the little image you see in the Address Bar when you view a site and may also be displayed on tabs if your browser supports that.

To create a favicon that has some transparency takes a few extra steps but it isn’t that hard. Here are the few things that you need to do:

  1. Create an icon for your site that is either 32 x 32 pixels or 16 x 16 pixels and add some transparency to it. This can be done in Photoshop or many other imaging programs, and when you are finished save it as a PNG image file.
    CyberNet Icon
  2. Download png2ico and extract the contents of the ZIP file (here is the homepage for png2ico but they don’t provide much information there). The program does not need to be installed and runs via the command line.
  3. The easiest thing to do is copy the PNG icon that you made in step one and the png2ico.exe file to the root of your hard drive. It isn’t necessary to copy the other files because they are just documentation.
    png2ico Folder
  4. Open the Command Prompt by going to Start -> Run, type in cmd and press Enter. Change to the directory that the png2ico.exe file is located in, which for me is the root of the hard drive.
    Change Directories
  5. Now you have to enter in the command for processing your transparent PNG image file and converting it to an ICO file:
    png2ico favicon.ico Icon32x32.png
    Final Result of Creating the Favicon.ico

You now have a wonderful transparent icon to use on your site. Just place the favicon.ico file at the root of your website and you’ll be all set!

As “The Rooster” points out in the comments Dynamic Drive has a nice site put together for those people that are looking for a quick solution to generate transparent Favicons. Most online Favicon generators that I have seen don’t support transparency but this one does, so it definitely deserves a bookmark.