Favicons

HTML Coding Tutorials | Submited Jul 1, 2008

Written by:

Wutz a favicon?

They're those little icons you see in your browser when you're on a site.
They show up in the page title, bookmark links, tabs, browser bar, and on the desktop if you save the page.
Cool, huh?

Are favicons needed?

No.
But, if two sites have similar content of the same quality, but only one has an icon that makes a website look legit, which one will you stick around?
As common as icons are at this point, one would question a site's legitimacy if it happened to not have one. I have, and I'm sure you have. Consider what would happen if PayPal took down their favicon.

How do I get one?

There's 3 steps.
•Create it
•Convert it
•Code it
It isn't as difficult as it seems - it's 10 minute task at most.
To create it, just open Photoshop, GIMP, Illustrator, whatever you like, and make a 16 X 16 image. It doesn't matter what, it's entirely up to you.

The next step is to convert it. A long time ago I found a way to do this in Photoshop, but now I can't remember it. If I do I'll post it. But you can find plent of converters for this on Google, DynamicDrive's is pretty popular.

To code it is probably the simplest part.
Put this in the head section of your page:

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

The interesting thing about this is, on some hosts, if you put name it favicon.ico and put it in your root directory, it'll be the icon for ALL pages, including .txt, .phps, and image files. If you look at one of the images on this page you can see an example of that.