Favicons

Wednesday, January 7th, 2004 at 2:21 PM | Category: Meryl's Notes Blog No comments

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):

<link rel=”Shortcut Icon” href=”/images/favicon.ico” />

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

<link rel=”Shortcut Icon” href=”favicon.ico” />

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:

Post a comment (or leave a trackback)

RSS Subscribe to be notified when new comments are added.

Get Updates