FavIcon Design Tutorial

There are two ways to create a favicon.ico:

• First option is to prepare your existing image to be converted to favicon.
• Second option is to create a brand new image.

Both tasks are easy to complete, and i will show you how to do it with free tools.

1. Cropping an existing image

I will show you how to create an image that has the same height and width - 50x50, 100x100 or 300x300 pixels. It doesn`t matter what size really, but it needs to be a perfect square, otherwise your favicon will look distorted.

You can use a logotype of your company, or any other image you like, and crop it to fit the proportions. Remember - we need a square image to create a favicon. In this tutorial I will show you how to crop your image with Irfan View. Irfan View is one of the best free graphic tools. Download it here.

1. Open Irfanview.
2. Go to "File>Open" and Browse for your image. Click on Open.
   
3. To crop an image in Irfanview, you do not need to select any tool. You simply click on image where you want to crop, and a box will appear. When you click on image, pay attention to the title bar. When you click and drag your mouse, selected box size shows in pixels in title bar, and changes as you move your mouse.
4. Your goal is to select a square box - 200x200 pixels or any other size of same proportion.
5. Don`t worry if you can`t target the exact number. Once you release your mouse, you can correct selected box size by simply moving lines up/down and left/right.
6. When you are done, click on Edit>Crop Selection. Now you have a perfectly square image.
   
7. Last step is to save your image. Go to File>Save As. Type in name for your image, select JPEG as file type and click on Save.
8. You are done. Great Job!

Now proceed to our Favicon Generator to transform the image you just created to your Favorites Icon.

2. Creating a brand new image

In this short tutorial I will teach you how to create a simple graphic, we will later use for your favicon. I will be using MS Paint, because it is included in all versions of Microsoft Windows, therefore lots of you already have it. You could use any other graphics editor.

1. Open MS Paint:
   In Windows XP: Start>All Programs>Accessories>Paint
   In Windows 98: Start>Programs>Accessories>Paint
2. A white rectangular space will appear.
3. Because we need a square image, go to Image>Attributes
   
4. Enter 32 for width, and 32 for height. Confirm with OK.
   
5. Because 32x32 pixels is a small image we will use a magnifier tool for easier editing. Click on magnifier and select 8x.
   
6. Now we have a nice square image to work on.
7. On left, there are several buttons you can use, on bottom there is a color palette.
8. I find it most amusing when I use pencil tool. Try it! It is lots of fun and you will find you can be very creative.
9. Tadaaa! Here is our smiley.
   
10. Once you are satisfied with your creation click on File>Save As
11. Name it favicon, select gif for your file format, and click Save.
    
12. Cool!

Now proceed to our Favicon Generator to transform the image you just created to your Favorites Icon.