WozzTopia

A favicon is a small, 16 ×16 image that is shown in a browser’s URL bar, bookmarks menu and page tab when your site is visited. It is a good way to have your site stand out and increase its prominence in the bookmarks menu.

Adding a favicon to your self-hosted WordPress blog is relativly simple, the following will guide you through the proccess.

Create your Favicon

If you are talented with Illustrator or similar packages you could make your own image themed to your blog, try and keep it fairly close to square. Or find an image that you want to use and crop it square like I have .

Now it a simple matter of using a Favicon generator to create yours. Hit the browse button to upload your image, and click “Create Favicon” button. Then on the next page click the link to download you icon it will be saved to your computer as favicon.ico

Installing your Favicon

Use any FTP client and  upload the favicon.ico, into the main folder of your current theme. and another copy should also go in the root directory of your blog, eg http://yourblog.com/blog/ so that it is visible for news feedreaders.

Now login to the admin section of your blog and select, Appearance –> Editor .

Choose “Header” from the list on the right.

Search for the line that begins with, <link rel=”shortcut icon” and ends with /favicon.ico” />

and overwrite it, (or if it doesn’t exist) add the following code just before the end head tag </head> as shown in the picture below.

Nessasary Code

<link rel=”shortcut icon” href=”<?php bloginfo(’template_directory’); ?>/favicon.ico” />

Click “Update File” button and restart your browser. Navigate to your blog and the favicon.ico should now appear in you browser address bar, bookmarks and tabs, if it does not hit the refresh button once or twice to force a refresh.

Below is a video tutorial depicting the steps to edit the theme and upload the favicon to your blog via FTP.

Favicon_demo.swf