11/28/2007

How to create and add a favicon to your blog or website ?

What is this Favicon ?

Favicon is nothing but just a small icon that appears in the address bar just to the left of the page address...like 5p shown above in the address bar.So How to create this ?

Step 1 :- select the image which you want to be shown in the address bar.Get some image using software like Adobe photoshop , paintshop pro........ or else there are lot of favicon generators available in the net . Try to create a image that looks relevant to your website.

Step2 :- Its better if your image has very less details like company initials,companies symbol . Reduce the size of the image to 16*16 pixels using some image editing software.Don't have one ?? Use Online Photo Editors .

Step3 :- In order to save the image in ICO format from photoshop , you need to get a plugin from http://www.telegraphics.com.au/sw/ . Extract the .8bi file in the zip file you downloaded to file formats folder in the plugins folder of photoshop.Now save your image in the .ico format and it's better if you are saving it with the name favicon.ico if you have access to root directory of your website , else save it with name xxx.ico if you are making it for your blog .

step4 :- Now you need to upload the .ico file somewhere on the web . If you have access to the route directory,upload favicon.ico in it.Else upload it on file hosting service.No one accepts .ico file . The only services are fileden and google pages.I uploaded my icon in the google pages .

Step5:- Now paste the following code in between <head> and </head>

<link rel="icon" href="URL" type="image/x-icon" />
<link rel="shortcut icon"URL" type="image/x-icon" />

Replace the URL with the location where you uploaded your .ico file . Refresh your page and you are done . If you have any problems , Contact me .

Worked for you ? For more Subscribe to Technova feed or click here to get updates via email

1 comments:

does it have to be named specifically: 'xxx.ico' ? or does that mean we can name it whatever: 'testblogfavouriteicon.ico'

Post a Comment