by Jo Shaer, on May 19, 2012
I had a very tricky job recently involving a Wordpress Favicon. If you're not sure what one is, it's the little image that appears for each website in the tabs that run along the top of your screen. If you're like me and have about 20 open, it's quite a pretty picture.
Anyway, one of my clients has a Wordpress blog that is a sub-domain of the main Joomla site so the prospect of uploading both a Wordpress and a Joomla Favicon filled me with dread.
It's one of those Wordpress chores that can be very convoluted but eventually very rewarding when you hear the squeal of pleasure from your client.
How to make a Wordpress Favicon
Basically, what you need to do is produce a 16x16px version of the image that you want to appear as the favicon in the tab. You can do this in Photoshop or any other editor and then use an icon making software to produce it in the right format. Or you can use faviconr.com to make your Favicon for Wordpress or Joomla.
This should then be saved to your computer as favicon.ico. This is a crucial part of the process. Call it anything else.ico and it won't get picked up so it won't show.
Next up, you need to go into Filezilla or another FTP client and upload the favicon.ico to the root domain of your Wordpress blog or website. That's at the same level where your Wordpress directories are listed. So it should appear as a file underneath the wp-includes, wp-content and wp-admin directories. Some articles also advise that you include it in the images directory of the theme you are using.
Then comes the difficult bit that is guaranteed to make you a bit concerned because you need to go into Appearance > Editor and select the header.php file from the right hand sidebar.
You need to copy and paste this line of code into the text underneath the tag.
NB Remove the space after the . These had to be put in or the line of code about the Wordpress Favicon won't show in this post.
Some say that it needs to go in a particular place underneath another line of code, whilst others suggest its position is not so crucial. My own feeling is that it depends upon the theme you are using because I have had success with and without placing it so precisely.
If you want someone to talk you through Adding a Wordpress Favicon step by step, this is a good article.
How to add a Joomla Favicon
Add a Joomla Favicon - go into your FTP client and upload the favicon.ico to the directory called templates/name of template.
You should remember that, whether you want to add Wordpress Favicon code or a Joomla Favicon, you will need to clear your caches and reload your browsers in order to get the latest version of your site to see if you have been successful in your attempts.