In case you don’t know what a favicon is:

A favicon is a little 16×16 pixel graphic next to the address of your website. For my blog, it looks like this:

These icons can be real nice and label your site, so anybody will recognize it. There are a few sites out there that don’t use Gravatars in their blog, but Favatars that will display your favicon next to your comment. In the next steps you will learn how to create and display a favicon on your WordPress blog. And additionally I will show how you display it in your backend, since your favicon will not be displayed there by default.

Creating the Favicon

First of all, you should have a graphic that you want to have as your favicon. I will take this great Olga Kurylenko Fake:

  1. Open your favourite graphic editor. I prefer Fireworks, but MS Paint will do just fine.
  2. Cut out the most appealing part – yes, that is her face – in a regular square.
  3. Resize that picture to 16×16 pixels and it will become:
    or or
  4. Save the 16×16 pixel picture as favicon.bmp
  5. Close your editor.

We will now have to convert this into a .ico file. To do this, we will use Irfanview.

  1. Open Irfanview.
  2. Open the favicon.bmp file.
  3. Then click File > Save as and choose .ico as filetype.
  4. Now you have your own favicon.ico! Congrats!

How to display your Favicon on your Blog

In the next steps we will set your theme ready for your favicon and upload the stuff.

  1. Go to the place on your harddisk where you have saved the favicon.ico file to. Click it with your right mouse button and choose copy.
  2. Now go to your theme folder on your harddisk and into the images folder. Click your right mouse button again and choose paste.
  3. Go back to the theme main folder open the header.php1
  4. Search for </head> and put in the following code just before it:

    <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" type="image/x-icon" />

  5. Save your header.php and close the editor.
  6. The final step is to upload the new header.php and the favicon.ico in the images folder from your harddisk to your webspace.

How to display your Favicon in your Administration Area (Optional)

Unfortunately WordPress doesn’t take over your favicon for the backend, so you have to set it up manually with this WordPress Hack:

  1. Go to your WordPress root folder2.
  2. Open wp-admin/admin-header.php in your editor and search for </head>.
  3. Just before the </head> part you put in:

    <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" type="image/x-icon" />

  4. Save the admin-header.php and upload it to your webspace in the wp-admin folder.

The WordPress Administration area now will also display your favicon.

  1. preferrably with an html editor like Dreamweaver, but Editor will do just fine. [↩]
  2. the one that shows wp-admin, wp-content, wp-login.php, etc. [↩]

Trackback? If you liked this article, subscribe for more updates.