website icon

How do I get my webpage to display an icon in the address bar, like this site (Blender Artists) does?

Make an icon file called favicon.ico and put it in the root of your website!

Not tricky at all really!

This tool is useful…
http://www.chami.com/html-kit/services/favicon/

Cool, thanks, I’ve done it now.

Here’s another question: Iwant to have some grayscale images on my page, with a transition effect when you move the mouse over it, it turns to colour. Now, I know how to do that, but the problem is that the colour images only start to load once the mouse is moved over it, thus it ruins the effect - images load too slowly. Now, how do I let the page start to load the images as it opens?

Forget fancy stuff…

Make your icon an .ico file for full-browser compatability, size 16x16 in 256 color. You can add other sizes and color resolutions if you wish, but this is the bare minimum.

Stick it in the same directory as your default web page (index.html, default.html, etc.)

Then, in your webpage(s), in the <head> … </head> section, add the lines:

<b>
&lt;</b>link rel="icon"          href="favicon.ico" type="image/x-icon"<b>/&gt;</b><b>
&lt;</b>link rel="shortcut icon" href="favicon.ico" type="image/x-icon"<b>/&gt;</b>

This is almost guaranteed to work everywhere a favicon is recognized. Also, if you are using XHTML, remember to terminate your <link …/> statements with “/>” instead of just “>”.

Hope this helps.

[edit]Oh, too late I am…[/edit]

That’s also valid HTML, so you might as well do it all the time.

Martin

Wow, I learned something.:eyebrowlift: /me fixes previous post

woa… thanks dudes!
got an icon on my page too, now :stuck_out_tongue:

It depends on how you are swapping your images.

If you are swapping the images by changing the src property of the image in your onmouseover - then you’ll want to create a javascript array of Image objects where you preload the content and just change the src to a reference in your preloaded array.

If you are swapping images by selectively showing and hiding DOM IDs - then you just need to put your color images into a div that is set to “display: none” and set it to “display: inline” and the BW version to “display: none” when doing your onmouseover (then reverse it for your onmouseout).