How To Add a Favicon To Thesis Theme

Update: The new favicon uploader introduced in Thesis 1.8 makes this tutorial somewhat redundant. The new, easier way to add a favicon to your Thesis theme is by using the favicon uploader. You can read more about it in this post: Thesis 1.8 Adds Favicon Uploader

Whenever I set up a new WordPress blog, I always like to add a favicon. For those who don’t know, a favicon is the small image you see to the left of the address bar or browser tab when you’re viewing a website. This is one of the more neglected things when people set up their websites and blogs. Even though it’s just a small image, it really does add that extra level of personalization. Adding a favicon to the Thesis WordPress theme is really very simple and won’t take more than a few minutes.

Create The Favicon

You first have to create the favicon image file. There are many favicon generators online, but the one I’ve used many times is http://www.favicon.cc/. You can also upload an image file and it will create a favicon file from it. Since favicons are really small (16 x 16 pixels), you can’t make it too elaborate. Just something simple and eye-catching. The one I used on this Thesis site is just a simple yellow box with a border around it, but I think it looks great. You can also create animated favicons on that website above.

Upload The Favicon

The next step is to upload the favicon.ico file to the root of your web host. That’s the main directory where all your core WordPress files are stored.

Add This Code To The Head Section:

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

To do this, you can either paste it into the WP Head section if you’re using the Thesis Openhook Plugin, or to keep it really simple just paste this code into the Additional Scripts section of the Thesis Options. Click on “Site Options” in the Thesis menu, then click on “Additional Scripts” and paste in the code above.

And You’re Done!

Of course, don’t forget to click the big green save button. And that’s all there is to it. Now you know how to add a favicon to your Thesis theme. You may not see the new favicon because you probably need to clear your browser’s cache. There is a good chance it will still be serving up the old favicon file.

What About Animated Favicons?

Using the favicon generator of your choice, you will create an animated version of the static favicon and you will receive an additional file called animated_favicon.gif. Save that file to the root of your site just like you did above and use this code instead:

<link rel="icon” type="image/gif" href="animated_favicon.gif">

Tagged as: Favicon, thesis tips