I’ve admired those sweet little images to the left of the url for so long, thinking it was simply out my league to add a favicon to my sites. It turns out it’s actually quite simple. Naturally I chose the beach ball and love what it does for the look of my site, not to mention how much easier it is to find the site when I have 10 tabs open at the same time!
Here are instructions for adding a favicon to Wordpress:
1. The most fun part is deciding what you want your image to be (make sure you are using a royalty-free image), then you simply need to resize it to 16 by 16 pixels in your favorite image editor (I use Photoshop) using a GIF or PNG format. Convert your image into a favicon.ico. (I’ve simply done this by renaming the image before I upload it through my FTP program.)
2. Add the following code to your header.php file of your wordpress blog:
<link rel=”shortcut icon” href=”favicon.ico”>
(You will need to be sure to clear the smart quotes from this code. I usually use a simple text editor to copy and paste the code from a blog, before I copy and paste it into my own site to make sure it cleans it up.)
3. If you are using the theme Thesis for Wordpress (which is what I use), you won’t be able to find your header.php file. Instead you need to go into Thesis Site Options from your Dashboard and add this to the field called “Additional Scripts”:
<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico”>
4. Then be sure to upload your favicon.ico file to the images folder for the theme.
5. Refresh you page and it should be there. Sometimes it takes a little while to appear. You may also need to clear your cache before it comes up.
Adding a favicon to your Joomla site:
1. Follow the same steps to create your favicon.ico image as above.
2. Usually the code for the favicon is already placed in the Joomla index.php file, but here it is in case you want to verify:
<link rel=”shortcut icon” href=”images/favicon.ico” />
This should be located before </head>.
3. You simply need to replace the favicon image in the images folder with your new image. (I got a little confused by this and tried putting it in the templates image folder, but then realized it needs to go in the main “images” folder). If you are using the Joomla control panel you can simply add it through the media manager.
4. Refresh your site and the favicon should be there. Once again, mine took a few minutes to come up. I thought I had failed and was beginning to give up, and then all of a sudden it just appeared!
I’m still learning about why the favicon works in some web browsers and not others. For example Safari works like a charm immediately, but I still can’t see my favicons in Firefox yet (on a Mac). If I learn any tricks about this, I’ll pass it along. Anyway, the point of posting this techie-related entry is quite simply because favicons make web browsing a little bit more fun!
{ 1 trackback }