So, you may have noticed that my blog has a cute litte tux the penguin looking at you through a round little window up in the left (or right) corner of your web browser. What you are seeing is known as a “Favicon” (short for Favorite icon) and it’s used to quickly and simply identify your website when it is in someones favorites. In this tutorial i’ll show you how you can make your own and what you must keep in mind when creating one.

To begin with, you’ll need a image, it can be ANY image. Just make sure that GIMP can render it first 🙂 What you need to do is to either Crop or Resize the image, and save it as “favicon.ico” in 16×16 resolution. Open up your image in GIMP and follow these simple steps:

1. To Crop an image, click the crop tool in the toolbox (or press [Shift] + C)
2. Select your selection to Crop and press [Enter], the image is cropped!
3. Click the Resize tool in the toolbox (or press [Shift] + T)
4. Enter the number 16 in both fields.
5. Select the crop tool again ([Shift] + C) and select the tiny image (you can zoom in if you like)
6. Select the entire image with the crop tool and pay attention to the toolbox, make sure the “Position” is reading 0 in both fields and the “Size” is reading 16 in both fields.
7. Press [Enter] to crop once again.
8. Go to File > Save as.
9. Name it favicon.ico
10. Select “Microsoft Windows-icon (*.ico)” in the drop-down box.
11. Click Save (if you get a popup, click “Save”)

Now that wasn’t so hard was it? Now i’ll show you how to simply Resize an image to fit as a favicon (This method is not recommended if your image is a circle or any other shape than a square).

1. Open the image with GIMP and select the Resize tool.
2. Click the image once and enter the number 16 in both fields and click resize.
3. Again, Select to Crop and click the tiny image.
4. Make sure the “Position” is reading 0 in both fields and that the “Size” is reading 16 in both fields.
5. Select the image window and press [Enter].
6. Go to File > Save as.
7. Name it favicon.ico
8. Select “Microsoft Windows-icon (*.ico)” in the drop-down box.
9. Click Save (if you get a popup, click “Save”)

Now all you have to do is upload it and implement it to your code, but how do i implement it into WordPress? Well that my friend, is a tutorial for another day 😉

Do you use GIMP?