There’s quite a few sites that explain how to add the favicon.ico file to WordPress themes, including the WordPress site itself.

The problem is, they’re wrong.

Or, at least partly so.

The reason is that to add a favicon.ico file to your website AND your WordPress blog requires a few hoops to be jumped through – none of which I see anyone writing about.

But first things first – what is a ‘favicon’?

Simply put, it’s the little image displayed in your browser when you go to a site. For instance, ActiveBlogging has one, which you’ll see displayed on the browser tab (if any) and on the URL line at the top.

To get one, you can use other’s creations (do a websearch on ‘free favicon download‘) or use an online tool, where you upload your image and have it condensed to favicon size (do a websearch on ‘favicon generator‘ for tools). A good rule of thumb is to use a picture that shrinks well, with large blocks of contrasting colors – otherwise, at the 16 pixels by 16 pixels a favicon displays, you won’t see much.

Once you have your file (which should be called favicon.ico, and ALWAYS in lower case), you upload it onto your site.

You can almost get it to work by placing the favicon.ico file at the top root of your site – where the site’s topmost pages are found.

However, that generally will display it just in bookmarks – sometimes. To get it on the address bar and tabs requires modifications to the web page.

And to get it to work on all browsers properly, it requires TWO lines (most articles mention a single line, and get that wrong):

<link rel="shortcut icon" href="http://egwebsite.com/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="http://egwebsite.com/favicon.ico" type="image/x-icon" />

(Of course, the href= must point to your favicon!)

For the WordPress blog, it’s as simple as adding the above lines, adjusted to your URL.

For a WordPress theme, it can be further adjusted, and with a bit of PHP code you can load the favicon no matter where your blog is located:

<?php
$x_home=get_bloginfo('home');
echo "<link rel="shortcut icon" href="$x_home/favicon.ico" type="image/vnd.microsoft.icon" />n";
echo "<link rel="shortcut icon" href="$x_home/favicon.ico" type="image/x-icon" />n";
?>

Just add this code in the HTML head section, somewhere between the and tags (for most themes, this means editing the header.php file). The get_bloginfo(‘home’) code above grabs the blog’s root URL, and then you add the favicon.ico entry to it.

This means that the icon will be loaded from the BLOG’S root, not the website’s – not a problem if your blog is in the root, but if not, then you’ll want to upload your favicon.ico file to both locations to cover all your bases.

This is, to my knowledge, the only code that works on a variety of browsers (FireFox, Internet Explorer, and Opera), and displays it on the URL bar, and in bookmarks. And it’s the code I’ve incorporated into my custom themes.

So with these two lines, you can finally get icons to your blog – and add a little extra look of professionalism to your blog!