This tutorial assumes you have Photoshop. If you can figure it out using a free program like Gimp, kudos.
- Open a new document: RGB, 72 ppi, transparent background, 100 x 100 (the dimensions can actually be whatever you want, assuming the file size isn’t HUGE, but they need to be the same)
- Design your icon: this is usually your logo. Some pointers:
- Using a dark gray circle behind your logo can help with that “web 2.0″ feel. Granted, I just went with my simple flame icon but it’s something to consider. Make a circle that has a beveled down layer style with the light source coming from 90° and about 20°-25° altitude makes for a good looking indention. Here are my settings:
- Place your logo on top of this circle layer
- Placing a similar bevel style on your logo can be beneficial as well, only this time, make the bevel direction “Up” instead of “Down”
- You may want to consider just using gray colors if your logo is simple. A good logo should work in black and white, grayscale and full color, being just as recognizable in each form.
- Before you export it, be sure to update your foreground color to the color you want to use in your matte settings.
- The Matte setting affects the edges of a transparent GIF. If Matte is set to None, the edges of the graphic will appear jagged when the GIF is placed on a Web page. If Matte is set to a color that matches a Web page background, the edges of the graphic will appear smooth against that background.
- I used a Firefox plug-in called ColorZilla to determine the background color of Firefox’s tabs. I do realize that this doesn’t look completely proper in IE because of it’s lousy blue tabs, but it does look fine in Safari.
- The color is #9E9E9E. Set this as your foreground color.
- Make sure any layers underneath your logo and gray circle are transparent and then go to File > Save for Web and Devices… or press shift + option + command + s
- Select GIF, along with “Foreground” from the dropdown menu for the “Matte” selection. The following options as well, saving it to somewhere you’ll remember (your Desktop!):
- Head on over to ConvertIcon in your favorite browser and upload your newly created GIF. In the last dialogue box, deselect “Original Size (100 x 100)” and select “16 x 16″ – then click export and save it to your desktop as a .ico file.
- Upload this file to the root directory (public_html) of your website and viola!
Comments or questions? Post away!
How to create a favicon for your website
This tutorial assumes you have Photoshop. If you can figure it out using a free program like Gimp, kudos.
Comments or questions? Post away!