Meryl.net Home About Blog Clients Services Contact

Features

Features on things wordy, geeky, and webby

Creating a Favicon

Wednesday, January 7th, 2004 at 2:49 PM No comments Category: Features

Once, I attempted to create a favicon (the little graphic in the URL address box) for this Web site, but never did finish the work until now. I used a free program that allowed me to copy and paste an image to create an icon, but I believe it has spyware so I won’t share its name. There are many icon creators out there.

In Photoshop (or whatever drawing program you have), I created a 16×16 pixel workspace. Added what I wanted in the icon (never could come up with a logo for the site, so I stuck with the m), select all (CTRL+A), copy (CTRL+C), and pasted it into the suspicious program. There, I saved it as “favicon.ico” and uploaded the file to my server.

It won’t work yet. First, add a line to the <head> of the index page. Here’s the line to add using XHTML standard formatting (if you’re using HTML, leave off the / at the end of the line):

If you keep the ico file in the root, then use this instead:

That’s it. The first time you try it, nothing might happen. Give it a little bit to take effect as that’s what happened with mine. You don’t have to specifically create a 16 x 16 pixel image to make it into an icon with the program.

Other sites with favicons for inspiration:

ul>

ul>

Update: Photo Matt has a nice favicon tutorial in which he points out a free tool. I love his icon! Dang, why can’t I come up with something that fits meryl? -sigh-

Subscribe: