How do you get an image in the top browser bar?

[md_doc]

Hello, Ive been trying to find this one out, but cant find anything about it...

Ive knoticed that many websites have a image on the browser bar which replaces the browsers default image, for instance, where there would be a e for interenet explorer, there is a sitepoint logo.

How do you do that? what type of image should be used? and what size image?

Its proberly a really easy stupid question, but i havent been able to find the answer anywhere.
Thanks

[BigAlReturns]

They're called Favicons, and they're simple to do. The best way to do is to use a tool like the one here, where you upload an image and it converts it into the right size for you. Then just save it as favicon.ico in the root of your website and you're done.

[famousartguy]

yes use a site to create a favicon - but place this tag in the head of your web page document:

<link rel="shortcut icon" type="image/x-icon" href="[path to favicon.ico]" />

Usually a 16x16 px works best--from what I have heard.

[BigAlReturns]

Originally Posted by famousartguy

yes use a site to create a favicon - but place this tag in the head of your web page document:

<link rel="shortcut icon" type="image/x-icon" href="[path to favicon.ico]" />

Usually a 16x16 px works best--from what I have heard.

I didn't know about those tags - so I did some searching and you're right, although most browsers will recognise it from the root directory alone, the best option is to include a tag, as some browsers need this. In fact one website recommended two different tags, shown below. They didn't include the type="image/x-icon" part, but that's probably just another thing to ensure compatibility. So to integrate famousartguys tags, I'd go with these:

   <link rel="shortcut icon" type="image/x-icon" href="http://www.site.com/favicon.ico" />
   <link rel="icon" type="image/x-icon" href="http://www.site.com/favicon.ico" />

[famousartguy]

Yes favicons are really nice for identifying your site and keeping your logo visually sticky to your site visitors.

Another cool thing is you can make animated gifs and use those for your favicon! Like this -->

<link rel="icon" href="images/animated_favicon.gif" type="image/gif" >

[ryanhellyer]

Originally Posted by famousartguy

Another cool thing is you can make animated gifs and use those for your favicon! Like this -->

<link rel="icon" href="images/animated_favicon.gif" type="image/gif" >

I'm not 100% sure, but AFAIK some browsers don't support .gif as a favicon as .ico is the web standard file format for favicons.