Add a little
flava to your blog with a
favicon. Favicon, short for 'favorites icon,' is the little graphic that shows up in your browser's address bar when you go to websites. If you look at the address bar on your browser right now, you will see mine - the purple box with "fg" in it.
This icon is also used in your favorites list (a.k.a. bookmarks), on tabs in Firefox (Use Firefox - it rocks!), and even Bloglines will pull in your favicon (eventually).
If you control your own domain name, you can create a favicon (sorry, blogspotters). Here are the techno-crafty steps I used to create a favicon:
QUICK INSTRUCTIONS1. Create a 16 x 16 pixel image and save it as an RGB, 8 bit, .bmp file.
2. Close the file and change its name to "favicon.ico"
3. Put favicon.ico in the root of your domain.
4. In the head tag of all of your webpages, add this line of code:
<link rel="shortcut icon" href="http://www.YOUR-DOMAIN-NAME.com/favicon.ico" type="image/x-icon">
5. You are done.
INVOLVED INSTRUCTIONS1. Create a 16 x 16 pixel image and save it as an RGB, 8 bit, .bmp file.
The file must be 16 x 16 if you want it to show up without being resized. I made mine a .BMP, but I think you can also use a .JPG, .GIF, or any other common image format. If you don't have Photoshop or Fireworks (or any other high end image software) you can use Paint, which comes free with Windows.
I usually start with a blank 16 x 16 image, but you can always try to take a larger square image and just shrink it to 16 x 16 when you are done. Sometimes that works, sometimes it doesn't.
If you look at site's favicons, you'll see they usually aren't very fancy. That's because it's next to impossible to do anything too cool and still have it be recognizable. Most favicons are letters (which are still readable when tiny) or mini versions of people's logos, which, if you didn't already recognize them, are weird
blobs. Daniel Burka has a collection of his
favorite favicons - maybe they will inspire you.
One of my favorite favicons is
Kuky's tiny, fluffy sheep. It's the most adorable, bouncy little thing - and it always cheers me up when I see it.
Don't stress too much about design, you can always swap it out later and everyone who visits will get the new one.
2. Close the file and change its name to "favicon.ico"
You should make a copy of your image file before you rename it. That way if you want to make changes to the original you don't have to keep renaming favicon.ico back to favicon.bmp over and over. Photoshop etc. won't open a file with the .ico extension.
3. Put the favicon.ico file in the root of your domain.
The root folder is the first or top-most directory in your site's hierarchy. My favicon is here: www.futuregirl.com/favicon.ico.
4. In the head tag of all of your webpages, add this line of code:
<link rel="shortcut icon" href="http://www.YOUR-DOMAIN-NAME.com/favicon.ico" type="image/x-icon">
An HTML webpage has two basic parts: the head and the body. This line of code needs to go in the head part of your page somewhere between <head> and </head>. Keep the line of code on one line.
If you use Blogger, you need to add the line of code to your template. When you go to your template, one of the first things is your head tag. Put the line of code on it's own line just below the opening head tag.
5. You are done.
Your favicon will show up right away unless your browser is showing you cached pages. You can click the reload button on your browser if you think you might have a cached page. Bloglines seems to take days and days for favicons to show up, but they will, eventually.
LAST THOUGHTSI don't claim to have the last word on favicon creation, so if you have any tips or want to give a shout-out to a cool favicon you've encountered, leave a comment.