Add A Favicon To WordPress

July 24, 2009, Posted by Christopher at 5:14 am

This quick tutorial will help you add a favicon to your WordPress installation … or just about any web site. Adding a favicon is actually rather easy. The hard part is designing an image that looks good at a very small size.

What is a Favicon ?
A favicon is a small … 16px by 16px … image. Your favicon usually appears right before your web site name in the browser location bar, in browser tabs, in browser favorites, in RSS readers, and the like. If mine is working correctly [ ] you should see a blue, stylized “4″ right before our blog name in tabs or right before the URL in the location bar. I am sure you have also noticed the red “Y” in the same location when you visit Yahoo. This is the image we shall be creating today.

Why do I want one?
Favicons can help identify your web site or blog across the Internet. These images become increasingly useful the more people use RSS readers and tabbed browsing. It offers the reader a visual reference allowing them to quickly identify your web site.

Step 1. Creating Your Image
Your favicon image must be a .ico . This can pose a little bit of a problem as some desktop image programs do not allow for the saving of images in the .ico format. If this is the case with your program, you can can save your image as a .GIF, .JPG, or .PNG and then use an online conversion program. You can create a 100 x 100 image, for example, and the conversion program will also shrink your image. I recently used the Dynamic Drive conversion program. ( link to web site ) You can also find many different programs that allow you to create a favicon online. A quick Yahoo or Google search can help you locate these.

Now as we stated above, your final favicon image is going to be pretty small … 16 x 16 … so here are a couple of design considerations for your new image.
1. If you are going to use multiple colors, definitely try highly contrasting colors. Black and white for example.
2. Steer clear of highly detailed images. Go with an image that will still be recognizable even in the smallest size.
3. Simple can be better. Many favicons rely as much on color as they do on actual look or wording.
4. Go with an image or letter that fits with your web site theme. This is usually easier said then done. I wanted to use a sword for mine, but at the small size it looked like nothing.

After you have created your favicon, make sure to save it to your hard drive in the .ico format.

Step 2. Upload Your Favicon To Your Blog / Web Site
Using a FTP program or CPanel, upload your favicon to your WordPress theme’s main folder. For example, the path to your main folder may look something like this:
… /wp-content/themes/classic/

The WordPress site also suggests that you upload your image to your main web site folder. For example:
http://www.YourBlog.com/favicon.ico

Step 3. Hook Your Favicon To Your Site
Under normal circumstances your favicon should already be appearing to your visitors (this may require a clearing of browser cache first) as most browsers will automatically detect the image. In order for it to work on some older browsers, though, you may need to add a quick snippet of code to your WordPress header file. Add the following code between the < head > and < /head > lines:
<link rel=”shortcut icon” href=”<?php bloginfo(’template_directory’); ?>/favicon.ico” />

I went ahead and added this code to my header files. I felt that it made sense to cover all the bases. There are always new browsers coming out and mobile phone apps … might as well make it easy to find the favicon.

That pretty much wraps that up. Told you the hardest part would be creating an attractive image. I’m still working on mine ….
More info can be found on the WordPress site.

Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments and thoughts ALWAYS welcome !

Chris