How To Add a Favicon To a Wordpress Blog or Site (Plus What To Do When It Doesn’t Work)
August 30th, 2009
Adding a favicon to your hosted Wordpress site makes you look like you are publishing a top rate body of work and that you are an expert in your field. Why? Because all of the biggest, most popular sites on the web have favicons, and they were the first to get them. So, by mental association, you’re part of the cool crowd when your site has a favicon 
However, as you might already know, installing a working favicon on a Wordpress blog requires more than just placing the file in the root or images folder. It takes proper placement and little bit of code, both of which are easy as pie to put into place. If you found this post because you already know how to properly install a favicon in a Wordpress blog or site and it isn’t working in Internet Explorer or at all, keep reading – I offer troubleshooting tips at the end of this tutorial.
How To Install a Favicon On Your Wordpress Blog or Site
1) Use an FTP client to upload your favicon to your theme’s main directory (for browsers) and to the root of the blog (for feeds).
2) Add this line of code to your header.php file somewhere before the </head> tag (I add it right before):
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
You can access and edit this file using the Wordpress Theme Editor.
3) That’s it! Your favicon should appear immediately in Firefox, Internet Explorer (7+), and any other major internet browser.
So, What Do I Do When That Doesn’t Work?
Good question. This process is solid, so if it doesn’t work it’s usually due to one or more of the following reasons:
- Make sure that your favicon is uploaded to the right places. You should have one copy in the root folder of your blog and one in your theme’s main folder, not the images folder.
- If you add the header file with the favicon code before you actually have the favicons in your hosted Wordpress site, it may not take. Delete the code, delete the favicons, and then start over, completing the process in the order stated above. It should work like a charm.
- If you experience problems with your favicon appearing in Internet Explorer only, try adding the addresses of the favicon.ico files themselves (e.g., http://yoursite.com/wp-content/themes/YourTheme/YourTheme/favicon.ico) as favorited in your Internet Explorer browser. Back in the day of IE6, you sometimes has to do this in order for favicons to appear (yes, it’s totally crazy, I know). If you have everything installed properly and it works in Firefox, it will work when visitors view your blog in IE. This is just to ease your mind as IE takes its time to find and display your favicon. It can take up to 24 hours for it to go live in IE.
Let me know if this works for you or if you need further assistance by leaving a comment 
To your continued success,
I.C. Jackson
Posted in 
Tags: 
What size should a favicon be?
Good question, Karen.
You should create your favicon image with dimensions of either 16×16 or 32×32 pixels. I always use 32×32 to get the highest definition possible. If the image you want to use is larger, crop it to a perfect square and just reduce the size to one of the two dimensions I suggested.