Change Your Blogger Icon

www.tips-fb.com
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's title in a tabbed document interface.

If you look at the top of this page, at the left hand corner of the address bar, you will see a small graphic of a portion of a something very "artsy". That is the favicon for this blog. If you are using FireFox or Opera, you will also see that icon in the tab. If yours is a personal blog, its upto you to use which photo. If you have not done anything to your blog template, the address bar of your blog may look like what you see below:


Now you know, rite? The favicon in the screenshot above is the standard Blogger favicon and this will be the favicon for all blogspot.com blogs by default. 

If you want your own favicon, these are the steps to put your own favicon into a Blogger or any blog.
1-Backup your template and backup the Page Elements

2-Convert an image file (jpg, png, gif, etc.) into an image with a .ico extension. Google for "free ico generator" or try this one. It is the best I found so far: 
iconj.com - Dynamic Favicon for Blogger

All you need to do is to sign up for a free account (I think if you don't want to, this may not even be necessary), click "browse" and select an image from your computer. 




Upload, and that generator will not only generate the .ico image for you, at the same time it will host the .ico image on the web and give you the .ico image URL in the same page. In fact, it does better than that. It gives you the code for you to copy-paste into your blog template:


3-Go to Dashboard and get into the LAYOUT of the blog you want a favicon for. Click EDIT HTML and look for . Paste the code you get from above and preview. If everything OK, click "Save" and your blog will have a favicon different from the standard Blogger favicon.

for example:
< head >

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


If you find it's not work, you can try this tips, just move your codes for the favicon from it original position in the template to just after ]]>< /b:skin> and just right before < /head>, preview and if everything looks all right, save template.

Actually, I left the original code for the favicon in its original place and copy-paste to just after ]]>< /b:skin> and just before < /head>

This is how that section of the template looks like after the fix:


]]>< /b:skin>


< link href='http://www.iconj.com/favicon.php?user=manature' rel='shortcut icon' type='image/x-icon'/ >
< link href='http://www.iconj.com/favicon2.php?user=manature' rel='icon' type='image/gif'/ >


< /head>

< body >

Hope you may want to try it and enjoy your new favicon.

*Some html script being bit different from the original to allow me to make this post. 




Related Posts Plugin for WordPress, Blogger...

Another Entry From Friends:

Say No To IE (Internet Explorer)

Photobucket