Nov

favico tutorial

Posted by mahesh chari Published in Html

How to Add fav icon to your web site

What is fav icon?

a favicon is really nothing more than a tiny png image with a .ico extension and sized to 16x 16 or 32 x 32.

How to create fav icon?

So, the first thing you need to do is to create the image that you want to use; whatever you use, don’t make it too complex because small detail tend to get lost when re sized to a tiny 16 by 16 pixels.Create a image that sized square model image.then you should re size to 16×16 px or 32×32px.here we can use photoshop , corel draw and gimp ..etc.before saving the image just add extension ico,instead of regular images gif,png,jpg.

Why should i give ico extension name?

Mostly modern browsers supports any format of image,but it must compatibly with older browsers also.you can give regular formats like favicon.gif,favicon.png,favicon.jpg also.

Where should i keep this icon on server?

Moslty browser search for favicon in root folder,so if you keep this icon on root directory like ,www ,public_html directory on server.
you can keep this icon not only root directory ,its your choice.if so you have to add small html code shwon below in header of each page of site. It works on your local server also.

1
2
3

  	<head>
	<link rel="shortcut icon" href="favicon.ico" >
	</head>

Adding GIF images as favicon

  	<head>
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="icon" href="animated_favicon.gif" type="image/gif" >
	</head>

in the above code we use two type of favicons . favicon.ico for old browsers don’t support gif images.
animated_favicon.gif is for modern browser supports.

Popularity: 13% [?]

Share and Enjoy: