Tutorial – How To Create Your Own FavIconBy
The Favicon.ico is a very small, custom graphic that appears in the menu bar, tab, and bookmark listing for a web site. All the major sites have them – you can pick out that Google “G” a mile away, right? You don’t need to be a graphic designer to create your own. You can make one for your site in just a few quick steps.
STEP 1: CREATE THE GRAPHIC
Start with your logo or an image that you want to associate with your brand. Open the file up in your favorite graphic editing program – personally, I use Macromedia Fireworks on my PC and Adobe Photoshop on my Mac.
Crop out as much excess white space as possible. Then reduce the size of the image to 16 x 16 pixels.
If your logo does not reduce well, you may want to improvise a bit and create a modified logo using your primary logo color and the first letter of your company name, initials, or a simple graphic that you associate with your brand. Since I don’t really have a logo for this blog, I chose to create my icon using design elements from my page – the little blue boxes.
STEP 2: SAVE & NAME THE FILE
In Fireworks, I just saved my 16×16 file as a low-res gif. Then I went into Explorer (my file manager) and renamed the file favicon.ico. Easy enough!
STEP 3: UPLOAD FILE & MODIFY CODE
Once the file is renamed, upload the file to you ROOT directory for your site. Don’t put it in your images directory.
Some browsers will autodetect your favicon, but to be sure, modify your site code. If you are using a template or includes, open the file that contains your header information.
Add this line of code to the *head* segment (within the tags):
Upload the modified pages and get ready to test it out. You may need to clear your cache first, but your new icon should show up next to your site name now.
There are some sites that will help you create your icon from your logo without using a graphics program. One I have found is Favicon Gallery. Plus there are plenty of examples of other icons there. Need more inspiration? Check out Inspire Yourself at Smashing Magazine.
Was this tutorial helpful? I’m sure this is not the only way to get this done, so if you have a better method, do share!!!