Adding a favicon should be easy but it isn’t!
It’s that really cool special one off logo that replaces the blue e at the top of a browser next to the address bar. It sets a site apart especially in the favourites section, at least for me. I can spot each of my favourites and identify them by favicon. So I set out to get one. The instructions seemed simple, straight forward, with a plethora of sites to help a fellow out. I followed the instructions and now it is all murky. One site even said I had one…but I couldn’t see it. So this is what I did, using numerous sites; feefavicon.com, faviconprime.com and html-kit.com. I took a nice photo of me this morning and began following an article specific to self-hosted WordPress sites (WordPress.org).
The graphic will need to be saved as “favicon.ico” before it will work. There are many tools on the internet that makes this easy so you don’t have to worry about converting your graphic yourself. The result will be two tiny images. One at 16×16 pixels and the other at 32×32 pixels. But the only one that is listed as faviconico is the 32×32 one
A tool for converting your image can be found anywhere on the net by searching for favicon creator. Go there and upload your image for conversion.
Now that you have your “favicon.ico” file. Upload the “favicon.ico” file to your root directory for your WordPress blog. If you don’t know what this is, look for the name of your site folder on your web host’s control panel file manager (like cPanel) or via your FTP client. It should be the same folder that contains your “cgi-bin, wp-admin, wp-content and wp-includes” folders. Along with those folders you’ll see many other single files including “.htaccess” If you see these you are in your root directory for your blog site. Please note that if you have multiple domains (not sub-domains) hosted under one master domain you’ll mostly likely find your root folder in the main domain’s “public-html” folder.
If you’re confused, just locate the folder where you installed WordPress which should be the folder the domain you’re using for your blog. Interestingly enough there is a zero kb file prepackaged into the wordpress root folder that will be replaced when you add your icon.
Now, upload your “favicon.ico” file in the root directory/folder. After uploading you should see your new file along with the other folders and single files mentioned above.
Next, you’ll need to insert a small piece of code into your header page. To do this, log into your WordPress admin and navigate to Presentation/Theme Editor. Alternatively you can use your FTP client. Locate your header.php file. Then locate the </head> tag. Place the the following code just above the </head> tag.
<link rel=”shortcut icon” href=”favicon.ico” >
After you’ve inserted the code it should look something like this:
<?php wp_head(); ?>
<link rel=”shortcut icon” href=”favicon.ico” >
</head>
<body>
<div id=”page”>
<div id=”wrapper”>
As long as you insert the line of code just above </head> tag it should work without problems.
The reason you are placing the code in your header.php file is because by default WordPress displays your header on every page. This means your favicon will also be displayed in the browser with all your pages that the header is called upon.
If your WordPress blog is configured differently where you’re header is not displayed on all pages then you will need to also place this code within the <head> and </head> tags on those pages.
Once you’ve finished it’s time to refresh your browser. Do this by hitting the “F5″ key or “Ctrl + F5″ to achieve a hard refresh. You should now see your new favicon in your browswer’s address bar. If your browsers uses tabs (like Firefox) you will also see there as well as in your favorites list if you save your site to your favorites.
If you have problems, the site I mentioned above also has a validation tool so that you can verify everything is working properly. If not, it should give a hint as to what may be wrong such as not finding the proper html tags. The validation tool is located here.
And yes well I still don’t have a favicon.
NOTE: This only works for self-hosted WordPress blogs (WordPress.org) and not blogs hosted by WordPress.com
Post a Comment