January 17th, 2010 
Jojo Agot 
A favicon is an image or icon that you can see at the left side of the address bar of your browser. It is used by most webmasters for instant brand recognition and to give a website a professional look.
A favicon is usually a 16×16 pixels graphic uploaded in the root directory of your server. It is stored in favicon.ico format and recently, you have the option to use animated favicons. The following are the steps to create a favicon.
1. Create an image file using any image editing program that allows you to save the file in .ico format like the GIMP. If you don’t have it, just use any program like Adobe Photoshop, Corel Draw etc. You can save it in any format but make sure it’s square like 125 x 125, 50 x 50.
2. To convert the file to .ico format, upload the image to Animated Favicon GIF Generator and wait for it to do the conversion. The process shouldn’t take a minute.
3. Download the zip file containing the image. You can preview the image if you like.
4. Upload the file to the root directory of your site. (For example, http://mycoolsite.com/favicon.ico)
5. Upload another copy of your favicon to your current theme’s main folder. (For example, http://mycoolsite.com/wp-content/themes/currenttheme/favicon.ico)
6. After uploading, go to your Wordpress dashboard, click Editor under Appearance. Select the file named header.php.
7. Look for the code that looks like this: <link rel="shortcut icon" and ends with /favicon.ico" />
Replace it with:
<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon.gif” type=”image/gif” >
If you can’t find a code described above, just insert the code provided between <head>…</head> tags.
8. Save the changes.
9. Open your homepage. Voila, your favicon is up there!
10. If you can’t see the favicon on your browser, use Favicon Validator. Just type your web address and the validator will try to search your server if the favicon was uploaded successfully. Remember that sometimes, it would take 24 to 48 hours before your favicon would start appearing on your browser. This is okay.
Did the tutorial work?
Posted in 
Tags: 
