Have you noticed that some websites/blogs have a little icon (favicon) next to the web address in the browser? Pretty cool, huh? But then you look at your website and all you have is this little globe icon in the address bar.
Today, I’m going to show you how to add a favicon to the thesis theme for WordPress. This way people think YOUR website/blog is the cool one.
How to Generate a Favicon
Those cool little icons are called favicons. And here’s how you make one using an already existing picture, logo or graphic:
1. Go to: http://www.html-kit.com/favicon/ (Thanks to Pamela Wilson of Big Brand System for letting me know about this site.)
2. Create your favicon by uploading a file. Or you can log-in to use your profile image from Twitter.
I just used my Twitter name to upload the picture. Once you click the ‘Generate Favicon.ico’ button the site creates both a normal and animated favicon. Before you download the Favicon Package, you can customize some of the options.
For example, I deleted the animated version. But I added the iPhone / iPod Touch / iPad icon. I also ended up using a black and white version because the color version looked too pixelated once it was actually on the site.
Then click ‘Download Favicon Package’ to save the files to your computer.
Upload the favicon to your website
Once you download the favicon package you’ll need to upload the file(s) using an FTP client. I use Cyberduck for Mac OS.
You’ll want to add the ‘favicon.ico’ file to the root directory of your WordPress blog. In my case it’s the folder for http://davecharest.com. If there is already a ‘favicon.ico’ file there just overwrite it with the new one.
Insert the script
Login to your WordPress dashboard. Go to: Thesis Options > Site Options > Additional Scripts
In the additional scripts box paste the following code:
<link rel=”shortcut icon” href=”favicon.ico” >
Click the save button and you should be good to go. You can even validate your installation here. You may need to empty the cache in your browser before you see any changes.
Did I miss anything in this tutorial? If you found it helpful please share it.
Add a link to your site in the comments below so we can check out your new favicon.
{ 0 comments }

