Monday, January 6, 2014

Html >> Address Bar Icon in HTML page - (PART_41)

Topic: How to put an address bar icon on my website?
            What is favicon and how can I add it?

 Explanation: 
 Favicon: Favorites Icon

Create a image with size 16X16 pixels and of format .ico, some browser can use .jpg or .gif formats too. Preferably create a .ico image.

We have used a gif [
http://www.hscripts.com/images/h22.gif] as a favicon for this page.

Upload the image file in to your directory [preferably root dir].

Use the following html code inside the <head> tag of your web page.

Example 1: Using complete path
<head>
<link rel="shortcut icon" href="http://www.your-page-name.com/favicon.ico"> 
</head>
The link tag does the magic. Give the complete path of the uploaded image in href attribute. 


Example 2: Using the path from the root dir
<head>
<link rel="shortcut icon" href="/images/h22.gif"> 
</head>
Here we use the path beginning from the root dir. i.e if the image or icon is present under vavavav.com/images/... the path should begin from /images/.... 


The address bar image also called as favicon may not work properly in IE browsers. Test it with a browser like mozilla or firefox. Create your .jpg/.gif files, it can be converted to .ico using some free online utilities.