Monday, October 1, 2007

Favicon

http://caramel-tea.com/wp-content/uploads/2007/01/fav_favicon.gif

A "favorite icon" or favicon (pronounced fav-eye-con) is a 16x16 pixels icon that appears next to a website's URL in the address bar of a web browser. If you are using a browser that supports tabbed browsing, the favicon will also appear next to the page title in a tabbed document interface. If you are using Firefox or Opera, you will also see that icon in the tab. If yours is like a personal blog, a good icon will be your personal photo. Scroll down to download Mozilla Firefox from here, if you don't have it, its way better than Internet Explorer.

Adding a favicon to your blog is a good way to distinguish your blog from the millions of other blogs. To add a favicon, you need to generate a .ico format file, a place to host the file and add 2 link elements in the section of your template. To generate the .ico file and to host it, you can go to MyFavatar. You need to have ready a roughly square graphic saved to your hard disk.

For those of you who are using New Blogger like me here's is what a sample looks like....

<head>
<!-- My Favatar -->
<link href='http://favatar.myfavatar.com/blogsmith.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://favatar.myfavatar.com/blogsmith.png' rel='icon' type='image/png'/>

<title><data:blog.pageTitle/></title>

Here's a step by step tutorial for those non techie peoples.

register
verify email address
sign in
click FAVATAR
click CHOOSE
upload favatar
browse to the image saved in your computer
click SUBMIT
message will say Favatar changed.
Click CODES at the top of the page
under FAVATAR CODE, click EDIT
enter URL
enter Title
choose Category
write Description
click SUBMIT
Message: Blog info successfully updated
click CODES at the top of the page
copy script from Favicon Code
favatar codes
sign into Blogger account
in the Dashboard, click LAYOUT of the blog
click EDIT HTML
look for <head> tag
paste scrip just below the <head> tag.
preview and confirm you can see your favicon in the address bar
save template