How to add a favicon to your wordpress blog

Yesterday I recieved an email from a guy asking how I placed my logo on the left side of the address bar. Then I relized that he meant the favicon. Well first of all lest’s explain what does a favicon mean. A favicon is the abreviated term of “favorites icon”. This icon should be unique and most of the times reflects the logo of the website it is asociated with.
favicons
Once a favicon is assigned to a website it shows in various locations of the browser. For example you may find it in your bookmarks list if the site in question is already bookmarked, in the left side of your browser’s tabs, in the left side of your navigator’s address bar and may be diplayed as well by many feed readers programs.

1- How to create a favicon?

You can design your favicon using any graphic software. If you are using photoshop you might need to install a plugin that will permit you to save in the ICO (Windows Icon) format. this format garantizes the visiblity of the favicon in the majority of the existing browsers. The plugin can be downloaded from here. Once designed you should resize your favicon to 16px X 16px. If for some reason you can not design it by yourself you may opt for other free solution online and get your favicon in few clicks away. There are several utilities online that offer the possibility of generating a favicon by uploading the image you want to appear on your favicon, and in few seconds you will be shown a link from where to download your new favicon. The following links provide this utility. Try all of them and bookmark the one you are comfortable with.

chuano.net
genfavicon.com
herramientas.recuweb.com

And in this link favicon.cc , apart from generating a favicon from an image they also offer you the possibility to draw and download it on the fly.

2- How to add a favicon to your site?

Adding a favicon to your websites pages is a very simple task. First you need to upload the favicon to the root of your server. Second you wil have to copy and paste the following code between the head tags of all the existing xhtml pages of your website:

<link rel="shortcut icon" type="image/x-icon" href=" http://www.your domain.com/favicon.ico" />

Make sure to change the path that points to your favicon location. Save and load to the server, refresh your browser and that’s it! if you could not see your favicon it is because the path to its location is not correct or the extention is not a “.ico”

3 – How to add a favicon to your wordpress blog.

Adding a favicon to your wordpress blog is fairly simple. First, copy and paste your favicon into your active theme directory. Second, You will need to modify the following file header.php This file is located in http://www.your domain.com/blog/wp-content/themes/your active theme/. Once there, open it in a text editor then copy the following line of code and paste it in between the head tags:

<link rel="shortcut icon" href="http://www.your domain.com/blog/wp-content/favicon.ico"  type="mage/x-icon" />

Again it is very important to check if the path points correctly to where your favicon resides, save your header.php file and upload it to the server together with the favicon.

I hope that this would be useful for you Mike and for all of who want to personalize your website with a unique favicon. If you have any further questions or comments, please do let me know.