How to create and add favorite icons to your website (favicon.ico)

Posted by face on October 13, 2007

Contents

  1. Introduction
  2. Required Software
  3. Create the 16 color 16x16 and 32x32 .png images
  4. Create the favicon.ico using png2ico
  5. Install your new icon

jump to end


1. Introduction

You may have noticed that firefox as well as IE 5 and higher have support for icons associated with URLs. These icons are displayed in the address bar of firefox as well as along side bookmarks/favorites in firefox as well as IE.

If you don't have a /favicon.ico installed on your site you will something similar to the following errors in your apache error_log file: 


[error] [client X.X.X.X] File does not exist: /htdocs/favicon.ico

Using png2ico is an intuitive way to create a single favicon.ico file containing the web standard 16x16 and 32x32 resolutions. This Guide focuses on using png2ico along with The GIMP.

The GIMP 2.X supports "Save As" .ico natively. I could not find an easy way to edit and place both resolution icons in one file. So if you only want a single 16x16 favicon.ico, just use GIMP2. However, If you want two resolutions in your .ico...continue following this guide.

back to contents
2. Required Software

You will need and image editor that can save .png images and png2ico. I recommend The GIMP for image editing. It is free, runs on most any platform and is better than the commercial expensive photo editing programs

For OpenBSD you can install The GIMP and png2ico like this: 


export PKG_PATH=ftp://ftp2.usa.openbsd.org/pub/OpenBSD/4.1/packages/i386
# or tcsh: setenv PKG_PATH ftp://ftp2.usa.openbsd.org/pub/OpenBSD/4.1/packages/i386
pkg_add png2ico-20021208
pkg_add gimp

For Windows:
  • For png2ico follow the instructions and download the binary from here (I have not tried the Windows binary but it should work).
  • For The GIMP, download and install GTK+2 and The GIMP (I use The GIMP on Windows all the time and it rocks. I love The GIMP on OpenBSD and Linux as well, but Windows gives more fonts than X.org to play with).

    For linux and other flavors of unix you may have binary distributions. I just checked Fedora Core 3 with yum and it does not have a binary dist so you would need to get the source code and build png2ico: 

    
yum install libpng libpng-devel wget gimp
wget http://www.winterdrache.de/freeware/png2ico/data/png2ico-src-2002-12-08.tar.gz
tar xfz png2ico-src-2002-12-08.tar.gz
cd png2ico
make
cp png2ico /usr/local/bin/.


    back to contents
    3. Create the 16 color 16x16 and 32x32 .png images

    Here is how to create the 16 color 16x16 and 32x32 .png using The GIMP:
    Tip: The right mouse button over the image will bring up the menus referenced in the steps below.
    1. Launch The GIMP and open or render your logo.
    2. Select the region of the logo you want for your icon. If your logo has layers, you may want to flatten the image to select the region you want for your icon.
    3. Edit->Copy the selected region.
    4. File->New to create a blank canvas...read the next step before proceeding
    5. Make the new canvas square by making the width and height equal to the greater of the two. You may also want to select transparent background under advanced options if it is appropriate for your selected image above.
    6. Edit->Paste the selected region. It should automatically be centered on your square canvas.
    7. Image->scale to scale your image to 32x32.
    8. Image->Mode->Indexed and select and set 16 color optimum palette (i.e. change 255 to 16). If your Logo happend to already by Indexed mode, then Mode->Indexed is not an option and you can't change to 16 colors. This is easy to work around by changing to Image->Mode->RGB and then back to Image->Mode->Indexed.
    9. File->Save As and name your file myicon32.png, follow wizard to export to .png
    10. Image->scale to scale your image to 16x16.
    11. If necessary you may want to zoom your image up and fix obvious scaling irregularities one pixel at at time.
    12. File->Save As and name your file myicon16.png

    back to contents
    4. Create the favicon.ico using png2ico

    Now create the favicon.ico file. From a shell or DOS window in the appropriate directory create the favicon.ico: 
    
png2ico favicon.ico --colors 16 myicon16.png myicon32.png
    You should now have your completed favicon.ico file.



    back to contents
    5. Install your new icon

    The final step is to upload it to the root of the htdocs directory of your website.

    That is usually all I do as I like to have the same icon for the entire site. I have read though you can upload it to any directory and have any page have a specific icon with the following code: 
    
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />

    References:
    http://www.winterdrache.de/freeware/png2ico/
    http://en.wikipedia.org/wiki/Favicon

    Thanks for stopping by.

    Graphics by GIMP
    back to top
    Digg! Delicious! Technorati Blinklist Furl Reddit
    • Comments

    Leave a response

    1. Shilo – April 17, 2008 @ 12:10 PM

      You can do all this very easily with just the GIMP. You already alluded to this in your article, but I would like to detail it for you a little better.

      The first thing you can do to tip you off to how to get multiple resolutions (16×16, 32×32, 48×48) is to download some favicon.ico files. Might as well just start off with your own.

      When you have saved the file locally, open it up with the GIMP and you should be able to see the method right away. You are going to use several layers. Each layer is the size of the resolution that you wish to have included.

      The layers are ordered from lowest resolution to highest resolution.

      Using the “Duplicate image” function is helpful when creating the various layers. I usually have a “working” image (that will eventually be the favicon.ico) and a “scratch” image (that I am constantly scaling and tweaking). I make all the edits on the scratch image, then “Select All” and “Copy”. I then paste that into the correct layer of the working image. When I am all done, I just close the scratch image without saving and save the working image as favicon.ico.

    Comment

    Hint: Comments now accept textile.