We’ve all seen them, but we may not know what they’re called: those tiny little graphics that appear to the left of the URLs in our browser location bars, or appear to the left of our Bookmark titles when we Bookmark a website, like, well, this site!
Well, that little image is called a “favicon”, as in “favorite icon” (typically pronounced with a short a, as in “apple”).
While a favicon is completely useless in a functional sense, I have had more clients get completely excited about having that silly little graphic appear next to their website address. This either means I don’t create enough excitement with my websites… or this proves my point: the little things in life can mean a lot.
And things don’t get much “littler” than favicons… And they’re pretty easy to make, too!
There are lots of programs out there, many of which you can download and use for free. I tried a couple and ended up liking the Adsen Favicon program the best.
Download your free copy here:
Installation takes seconds, and creating favicons is pretty easy”
- Create and save a JPG of the image you wish to use (it needs to be 16×16 pixels, so details are minimal)
- Open Adsen Favicon
- Click the Open image button and navigate to the JPG you saved
- Click the Save icon button and navigate to where you want the favicon stored
Favicons are saved as .ICO files. To make attach that image to your webpage, include this line in the HEAD section of your webpage:
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon" />
Note: The HREF I use requires the favicon to be in your website’s root directory. This is to help IE find it… seems if you place it nested at any depth into your site, IE won’t be able to find it… poor IE, always getting lost… :-)
And that’s it!
Ok, that’s almost it… One could also create an animated favicon, if one so desired:
Though, some web optimization specialists recommend against it, and they can be a little annoying to the eyeballs…