The Simplest Hack to Add a Favicon to your WordPress Blog

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

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.

TechChunks FaviconHaving 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:

TechChunks Favicon in Bookmark Folder

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! 🙂

35 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

19 + four =

CommentLuv badge