I know this could be the trillionth web article on how to add a favicon (favorite + icon = favicon) to your blog. But, as I look up in Google I am yet to see a tutorial that is simple and easy to implement. Most of them are written in a way that may not be so friendly for the average web user who has just created her first self-hosted WordPress blog and still has a long way to go as far as getting used to buzzwords and understanding technicality is concerned. So here it is; the simplest and easiest way to set a favicon to your WordPress blog and add some personal touch (identity) to it.
Add a Favicon to your WordPress Blog
Before we proceed, favicon is that little icon you see next to the address bar in your browser. And this is the small personalized picture (icon) that shows up next to the Favorite URL when you look at a Bookmarked blog.
Having a favicon on your blog allows your readers to quickly identify your blog in their Favorite folder among the other bookmarked sites. Take a look at the screenshot below and see how having a favicon can help you have some distinction over other blogs that don’t have a favicon and show a rather boring blank page where there could be a nice looking personalized favicon:
Even though it’s one of the simplest changes that you can make to your blog’s appearance, many websites and blogs leave out this small detail for reasons, still mysterious to me. One of those reasons could be that they didn’t realize how simple and easy this is to implement, actually.
In this article I’m going to show you how to add a Favicon to your WordPress blog/site in the simplest way; in fact just a single line of code does it for you.
|
|
Creating the Favicon image:
A favicon is actually nothing more than a tiny little png image with a .ico extension and sized to 16 pixels by 16 pixels (also can be 32 by 32). The first thing you need to do is to create the image that you want to use as your favicon. A little word of advice is that, whatever tool you use to create this favicon just make sure that it is saved in .ico format. And don’t make it too complex because small details tend to get obscured when resized down to a tiny 16 by 16 pixels image.
Free Tools to Create a Favicon:
While you are free to use your own image editing software (like Photoshop et al) to draw your favicon, Favicon.cc has a superb tool that lets you draw your own icon quickly with few easy clicks while the favicon in the browser updates in real time to reflect your changes. It even lets you create cool animated favicons frame by frame. And the best part is that this tool automatically saves the favicon in .ico format as well, making it straight forward for you to directly use the saved image as your favicon. While you are free to name the favicon anything (e.g. little_potato.ico), usually a favicon is named as favicon.ico. Naming your favicon by this convention will also help if you are going to place it in your root directory [details in the following steps].
Converting the image to .ico Format:
Though most of the modern day browsers will allow you to use a non *.ico image file as your favicon, you might not be so lucky with older browsers like IE 6.0. So if you want to make sure that your favicon is cross-browser compatible and is available to all your visitors, then better you should use the image that is in .ico format. This won’t be necessary if you created your image by using Favicon.cc as in the above step. But if you used a different image editing tool that saved the final image in a non *.ico format then nothing to worry. The solution is just a few clicks away. This time import your image in Favicon.cc (“Import Image” option on the left sidebar) and upload your image. The tool will convert your image to .ico format and let you download it.
Adding the Favicon to your Blog/Site:
By default, most browsers will search for a favicon named favicon.ico, in your blog’s root directory. If you don’t have any problem with placing an image file in your root directory, then go ahead and just upload the file to your blog’s root directory. Please note to make sure that it’s named favicon.ico and you should be able to see your new favicon straightaway. However, for some browsers you may need to clear your browser cache to see the updated favicon. Though this is rare, sometimes few browsers may take up to a couple of hours to recognize your updated favicon even after you have cleared your cache.
Anyway if the new favicon.ico is not recognized by default (after placing the image in your root directory), don’t loose heart. Because the solution is much easier than you may think. This solution also helps in case you don’t want to place the favicon.ico image in your root directory and want to place it in a more logical folder instead (like: http://your-blog.com/wp-content/themes/current-theme/images/favicon.ico). In such case, you need to tell the browsers where your favicon is located. To do so you need to go to WordPress Editor and open up your theme file that contain the site’s <head></head> section. In most cases that is the header.php.
Now assuming that you added your favicon.ico file in your themes image folder, you need to add this simple line of code to your header.php anywhere between the <head></head> tags.
|
|
<link rel="shortcut icon" href=" http://your-blog.com/wp-content/themes/current-theme/images/favicon.ico" >
Obviously if you named your favicon differently (e.g. your-blog-favicon.ico) and saved it at some other location, you will need to adjust the href attribute appropriately. Make sure you clear your browser’s cache after making the change and your newly implemented favicon should be waiting to greet you. 
Hope adding this little line of code helped you to configure your own new favicon. Drop me a comment below and I will like to visit your blog/site and have a look at your favicon. Cheers! 
Google+ Traffic Dropping Already; The Beginning of The END?
Sony Ericsson's Disturbing Xperia Play Promotional Video Ad Has A Sequel Now [Video]
Top 25 BlackBerry Secret Codes To Unlock Hidden Menus And Features
Ultimate Collection of Top 20 Funny Apple iPad Pictures (Photo Manipulations)
The Ultimate Blu-ray Media Player for Mac From DVDFab
Satellite TV Vs Cable TV: Top 5 Comparison
Sara (16)
Cellphone Buying (6)
mohamed (5)
Ibr steam boiler (3)
used tires (3)
Easy Tips (2)
very good information it helps a lot thanks!
What a cool little tip to add a favicon to your blog? You were damn right when you said that it was the SIMPLEST hack to do so. Thumbs up to you!
.-= ProBlogger´s last blog ..5 Plugins To Make Your WordPress Blog Blazing Fast =-.
Its the same technique as all use to display favicon in the browser. So, whats cool in this post??
.-= techprism ´s last blogpost >> How to Backup and Synchronise Bookmarks in Mozilla Firefox =-.
I think the “coolness” is it’s simplicity! I think you are probably missing it since you used to adopt this very same method to setup a favicon. But, give Google a try and I am sure you would be surprised at the number of possible ways in which one can do it and then you may be able to realize the difference
Hey very nice blog!! Will add to feed reader
Glad you liked the blog. Keep visiting in future for more updates
Hey that was super-helpful, thanks! Successfully added my favicon but it still doesn’t show up on my RSS feed or in reader programs? Any ideas? Thanks!
If you can see it in your browser, then I would suggest you to wait a while (usually 24 hours) before you can see it in your RSS bookmark.
Alternately, you could try clearing your browser cache to see if it helps. All the best
Good news! I tried bookmarking your site and the favicon works like a charm at my end!
Your favicon is cool, by the way
Thanks!
My only issue though is if you click the orange RSS button there’s no logo anymore – so anyone who decides to subscribe to my feed using google reader, etc won’t see my favicon? I can’t work out why that is. Any ideas?
Hope you keep The Daily Transmission bookmarked by the way!
Hi, You have a Great Blog, I found your blog on Google and read a few of your other posts. I just added you to my Google News Reader. Keep it up.
Glad that you found us via Google. Next time, make sure that you don’t need Google Search Engine to reach us though (Thanks to Google Reader)!
HI there, a very nice tutorial indeed. I have tried putting the favicon.ico file in the root directory, but the favicon did not appear, then I tried by putting it in the themes image file, then too it did not appear, I just dont know what is the problem, though I had put the line of code too in the header.php file. What could be the reason?
.-= Health n Fitness Care´s last blogpost >> TIPS FOR HEALTHY HAIR =-.
Well, have you made sure that you’re pasting the appropriate code in the header.php anywhere between the tags?
Yes I have pasted it between the tags, and even tried several times by changing the location of the code between the said tags. I have tried both ways by putting the favicon.ico in the root directory and in the theme/image file but without success.
When I check in the browser, it shows the size of the image as 0px x 0px, can you help me out with this problem? I am using wordpress 2.9.2 is it anything to do with wordpress version.
.-= Health n Fitness Care´s last blogpost >> TIPS FOR HEALTHY HAIR =-.
It should work even in WP 2.9.2
Do one thing. Try with a different favicon image and we’ll see what happens…
Not working with other image too. When I check the browser, it shows the location of the favicon.ico file but the sise it shows is 21kb and dimension 0p x 0p, how is this possible. On checking browser for your site it shows size: 1.37 KB (1,406 bytes) and dimension:16px × 16px and location: http://techchunks.com/wp-content/themes/Channel/images/TechChunksFavicon.ico It has puzzled me what could be the reason?
.-= Health n Fitness Care´s last blogpost >> RECENT DISCOVERIES ON THE HEALTH BENEFITS OF ACAI BERRY =-.
While the size of your favicon (21kb) sounds little bulky for a favicon, it shouldn’t stop it from rendering. I wonder why you are seeing the dimension as 0p x 0p. That is obviously the culprit here. Could you recheck your code and look for a location where (inadvertently) you might have declared a 0 dimension? Alternately, try setting the dimension as 16p x 16p and that should work. Let me hear how it went.
If nothing works for you, I could sit with you over the weekend and together we could try and sort this little glitch.
I managed to solve the problem, there was a problem in the theme. By the way can you tell me how to reset the dimension of the fevicon.
Thanks for the support mate!
.-= Health n Fitness Care´s last blogpost >> RECENT DISCOVERIES ON THE HEALTH BENEFITS OF ACAI BERRY =-.
Glad to hear that you managed to fix the problem. However, I don’t see it yet from Firefox.
You could define the dimension in the line where you are setting the file path of the favicon.
Ya I need to change the theme for my favicon to be visible, which I shall be doing in couple of days time.
Sounds exciting. Let us hear when you have the new theme and favicon running.
Hi, my site with new theme and favicon is live now. Please review and tell how does it look?
.-= Health n Fitness Care´s last blogpost >> RECENT DISCOVERIES ON THE HEALTH BENEFITS OF ACAI BERRY =-.
Great to see that you’ve finally managed to set the favicon. The favicon is bit on the brighter side but I can understand