Favicon Tutorial

Favicons, also known as favorites icon, is that little image that you see right next to a website's URL or bookmark. Now I know that you're thinking, isn't that awesome!? Well, it is, but you're probably also wondering, how can I put that up on my own site? This tutorial covers both creating a favicon and putting it up on your site. If you are using a favicon from someone else, then you will not need to read Step 1, 2, or 3. In addition, I use Photoshop CS3 to design my favicons, but I'm pretty sure you can achieve a similar effect using GIMP or Paint Shop Pro.

Step 1:
First, create a new image by going to File > New. Then make a 16x16 image, the size of a typical favicon.

Step 2:
Next, take the Rectangular Marquee tool and change the Style of the Rectangular Marquee to Fixed Size and add the height and width of the marquee to 16x16. Next, open your image or sprite and then apply the marquee to what you want the favicon to be. I'm using an Absol sprite:

Step 3:
After that, use the Move tool to move the marquee and the cut image to the original favicon document:

You can stop here if you would like and just skip to Step 6, but if you would like to make your favicon look nicer, move on to step 4.

Step 4:
Next, create a new layer below the favicon and put your favicon's background color there. Once you do that, right click on any layer of your current work and click on Flatten Image. Duplicate the Background image and then delete the Background once you duplicate it:

Step 5:
Once you have finished, double-click on the Background copy layer and apply a 1px Inside Stroke border on it. Save your favicon as any format, but I chose to save it as a PNG. This is how your favicon should look like once it is complete:

Step 6:
Now that you have completed creating your favicon, it is now time to add it onto your site! First, upload the favicon onto your main directory. Once you have finished uploading it, add this code between the tags on your coding.

<link rel="icon" type="image/format of favicon" href="full link to your favicon">

<link rel="icon" type="image/png" href="http://example.com/favicon.png">

So that is all for this tutorial! Of course, this is just a basic tutorial on how to create favicons. You could easily modify a favicon so that it looks much better! Good luck!