Adding a Favicon

You may or may not know what a “Favicon” is.  In case you don’t, it’s the little icon that you see in your web browser either next to the site URL, or next to the title in the tab.  You often also see them in your bookmark list, or in RSS readers.

If your site does not have one, then the URL field of your web browser will probably look something like this:

The DIY Blogger URL without a FaviconWhich means that it looks like every other site out there without a Favicon.  And yet, there are not that many graphics programs around that allow you to create them in the right format.

So here are the simple steps to get a Favicon active on your WordPress-based website:

1. Create a graphic file of the icon that you want to use.  This can be a normal JPEG file, and as long as it’s square, don’t worry yet about it being the right size.

I just took part of the site logo for the DIY Blogger:

Part of the DIY Blogger logo2. Now visit www.favicon.cc.  Click here on “Import image” and upload your JPEG file.  It will be turned into a 16 x 16 pixel graphic.  This is what happened to mine:

The DIY Blogger Logo in 16x16 format3. Using the on-site tools, you can make changes to the icon at this stage if you want to.

4. Click on “Download Favicon” and save the file “favicon.ico” to your hard drive.  Now upload with using an FTP client to your main WordPress directory, ie. the same directory as the wp-config.php is in.

5. Clear your browser cache and refresh the page (in some cases you may need to re-start the browser as well) and the icon should appear.

The DIY Blogger URL with the Favicon6. In some cases, particularly with some theme frameworks, the icon doesn’t get picked up because the theme expects it somewhere else.  In this happens to your site, then install the Personal Favicon plug-in, where you can specify the file location manually.

In my case, the settings look like this:

Personal Favicon Plug-in Settings7. That’s it!  Now your Favicon should appear next to everyone’s bookmarks that go to the site, as well as on sites like GoogleReader.

Why not leave a comment below with the URL to your site so that we can all see the new Favicon?

About Graham Tappenden

Graham Tappenden is a blogger from Germany. He has written code for WordPress themes since 2006 and been creating websites since 1994.
This entry was posted in Theme Basics and tagged , , , , . Bookmark the permalink.