Sunday, October 14, 2007

How to add a favicon to Blogger

After uploading a favicon for my PHP site, I've tried placing a favicon here on Blogger. The procedure is very easy. After creating an icon or animated GIF image, upload it into a photo webhost or server, like Photobucket.

Log in to your Blogger account, click the Layout link of your blog.



On the Template tab, click Edit HTML.



Now you have to add this code into your Blogger HTML template, just below the <head> tag:

<link href='http://i71.photobucket.com/albums/i134/xxxxxx/xxx.jpg' rel='shortcut icon' type='image/ico'/>





The text with a blue color should be replaced by the Direct Link code of your image uploaded on Photobucket. You may upload your image into any photo webhosts, as long as the URL format above is followed.

Save your HTML, and you're done!

How to add a favicon to your PHP site

After hours of trial and error, i finally managed to put a favicon for a PHP site of mine (Blogwerx). It’s an animated one, created using a trial version of Easy GIF Animator. A simple favicon would be a 16×16pixel icon image (.ico), but as long as your icon is a sqaure the size really doesn’t matter (Blogwerx icon is a 160×160 image). GIF images should also be a square. Haven’t tried uploading a rectangular image though, so I don’t know the consequence of uploading such a picture.

By default, and just to make sure everything will work our correctly, your icon should be named favicon.ico, and if you want to upload an animated image, it should be named animated_favicon1.gif. I think you can name them anyway you like, as long as the filename is indicated in the code. But then again, let’s just be on the safe side.

Loading a favicon is pretty easy once you know where to look and edit the code at. The code will be inserted at the header.php file. If you use a template for your Wordpress site, the header.php file is located inside the themes folder, which is inside the wp-content folder, which is inside the public_html folder.*

/public_html/wp-content/themes

*This directory works for the Blogwerx site. Depending on your installation, this directory may be different from yours.

Choose the folder of the theme or template that you are using. (Blogwerx uses the Fresh (Compact) design). Inside your theme directory is a folder named images. Transfer your created icon or GIF image inside the images folder (using your favorite FTP program).

If you have uploaded an icon image (.ico), the change will take effect immediately, as the code is already included in the header.php by default. By default, your favicon code inside the head and head tags looks like this:

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

The first line is for an Icon favicon (.ico), while the second line is for an animated icon (.gif).

If your header.php doesn’t have these codes, or is different from the ones listed above, or you uploaded an animated favicon, manually type or edit it inside the head and head tags. Make sure the filename of the images you uploaded, and the folder where you placed them, are specified in the tags. For an animated icon, change the second code above to the code below:

<link rel="icon" href="/images/animated_favicon1.gif" type="image/x-icon" />