Standing Out with Favicons

Have you ever seen a site with a favicon? It’s that tiny little image to the left of the URL that also appears in your favorites list if you bookmark it. It doesn’t seem like all that much, but it could be useful to you. How? It could help your site stand out in the crowd, and on the Internet, with its millions upon millions of sites, standing out is an absolute must.

Plus, it makes you look good, and you’ve probably noticed that effect for yourself. You might have landed on a site with a favicon, looked up in the URL, saw the neat little picture, and suddenly had a much higher opinion of it. I personally love them, and take sites that have them more seriously just because of one nifty little image.

That’s why I added some of my own to both of my current web sites. I’ll grant that they’re not much more than colorful monograms, but they still do the job nicely. They’re not hard to install either, and you could even make your own.

So, how do you install a favicon on your web site?

1.) First, you make it, and you can do that at

RealWorld Graphics – Online Icon Maker

This site will also let you upload an image and change it into a 16×16 pixel favicon. I preferred that method, because punching them out by hand didn’t work as well as a picture conversion. Just remember that when you make your soon-to-be converted image, you’ll be reducing it to a tiny icon, and you’re going to lose a lot of detail.

2.) Name your image ‘favicon.ico’. The maker at the web site I gave you will do that, and save it to your computer besides.

3.) Once you get your desired favicon, put it in the root directory of your web site, and these tags just below the HEAD command in your HTML.


<link rel=”shortcut icon” href=”http://www.yoursite.com/favicon.ico” />
<link rel=”icon” href=”http://www.yoursite.com/favicon.ico” />


Don’t copy and paste these, but type them into your site’s HTML file with your site’s name instead. They’re formatted to display properly in HTML, and not to be put in a text file.

Putting both LINK commands covers multiple browser types.

4.) Make sure your favicon looks the way you want, and that it appears. IE7 gave me some trouble with updating the images if I downloaded new ones, but Firefox was more cooperative.

I put mine up recently, and I suspect they’ll require some optimization just like everything else. Still, I like the way they turned out, and recommend you adding your own.