Friday 25 November 2011

How to Add Favicon To Your Blog URL Address


Do you ever seen your blog URL? What do you see beside your blog URL? yea.. beside your blog URL address is a blogger icon.. 


The icon beside URL address named with Favicon (favourite icon). If you ask to me, do blogger icon can be changed with your icon or might be with your photo's? I will answer, "Yes, you can do that."


Now, lets get it rock!!


Generally, for me, it devided to 3 steps. These are the steps : 
1. Main Step: Create/Modify the current image and convert it to " .ico"
2. Co-Main Step: Upload to webhosting and mind the website address to direct to the favicon
3. Update in Blog: Upload the icon in your Blog template.


MAIN STEP
First you must have an image that is in .ico format. If you don't, then, refer below steps.


You don't have icon, huh? For do that, you can use favicon Generator, please check out http://www.favicongenerator.com


In the favicongenerator.com:
1. Click at the "Choose File" button to choose the picture.
2. Click at the "Open" button to Insert your image which will change into favicon..
3. Click at "Generate Favicon!" button.
4. After the process is complete, click at "Click Here to Download your favicon".
5. Save into your computer.




Co-Main Step:
Upload your Favicon to image hosting. If you don't have image hosting yet, then you can read at this post!.


Alright, now I assume you've had the URL address of your favicon. For example, I have a favicon URL address like this: http://www.tmspot.com/creative/favicon.ico  .

You must change the favicon URL address to be like this :
<link rel="shortcut icon" href="http://www.tmspot.com/creative/favicon.ico"/> 




Update in Blog
1. Login to blogger with your ID.
2. Modify in your template. Below, is the steps to modify your template.


Steps
1. Click at "Layout".
2. Click at "Edit HTML" tab.
3. Click at "Download full template" link. Save your template into computer (Important!! Just in case you don't want to change your favicon):


4. Now, in the template, with those html code, you have to place your "Favicon code" below of in the column of "<head>" and "</head>" . 


Favicon example:
<link rel="shortcut icon" href="http://www.tmspot.com/creative/favicon.ico"/> 


So, now, it will be:
<head>
<link rel="shortcut icon" href="http://www.tmspot.com/creative/favicon.ico"/> 
</head>


5. Click "Save Template" button.


You are Done!! Now you have favicon at your blog URL address.


If you enjoy this post please Digg It! 


Enjoy your new favicon.

0 comments:

Post a Comment

Have you read these yet?

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews