Create a Favicon

By: DN
Posted: December 12, 2004

You are probably wondering what a favicon is. It’s a widely supported feature in most modern browsers that allows a site to specify a small graphics or icon to go next to the address in the address bar. Favicon are also used when you bookmark pages with Internet Explorer. For some reason IE occasionally has a problem with favicons. Mozilla, on the other hand, utilizes favicons perfectly.

Steps to Create a Favicon

  1. Download png2ico, which is a small, free utility for Windows, Linux, et cetera that works quite well. Extract it to C:\ .
  2. Create an image you’d like to use in your favorite image editor.
  3. Save the image as favicon_32.png 32×32 and favicon_16.png 16×16 in PNG format to C:\png2ico
  4. Open up the command prompt and navigate to the folder where png2ico.exe exists.
  5. Now run this command to combine your two PNG files into one ICO file:
png2ico.exe favicon.ico --colors 16 favicon_32.png favicon_16.png
  1. A new file call favicon.ico should have been created. Upload it to the root of you site.
  2. For the favicon to show you need to put this special HTML code between your <head> </head> tags:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
  1. Enjoy your new trendy favorites icon.