There are so many ways to customize your web site, but favicon (short for favorites icon) is one of my favorite little "bells and whistles" option that I love.
Below is some information on what a favicon is and how to create and utilize the icon. The directions below may seem a little overwhelming at first, but honestly its e-a-s-y, just take the steps one at a time and in less than 15 minutes (roughly) you can have a customized favicon on your site too! Good luck!
WHAT IS FAVICON?
Favicon is the little graphic (icon) beside the URL address in your browser bar. It also appears in your bookmarks or favorites list.
WHY USE A FAVICON?
Since most of us have bookmarked hundreds of web sites, it can become very hard to find the link you're looking for. Favicons helps the link to stand out - and much like a logo can help you identify a company/link quickly.
HOW DO I CREATE A FAVICON?
First you need to create the graphic in either Photoshop, Fireworks or similar. The graphic needs to be 16x16 pixels. Save the image (I save mine as .jpg) to your desktop or somewhere else that you can easily locate it.
When this is done, find a program that convert your graphic into a favicon which uses the .ico extension. I use a free service online at the HTML kit which can be found here. And did I mention it's free? Love it! Disclaimer: While I have used this online service many times with no problems, I take NO responsibility for 3rd party software! <--- don't you love the legal stuff? *sigh*
So now you have your graphic file with the .ico extension - what's next? This may be where you consult your web designer, or you can try this yourself...it's not too hard but familiarity with HTML and FTP programs is always helpful.
HOW DO I GET A FAVICON TO APPEAR ON MY SITE?
The first step is to move your icon to your server. (I store mine in the main directory as opposed to a sub directory such as an images folder).
Then you will need to add a line of code to your header tags:
<LINK REL="shortcut icon" HREF="http://www.yoursitename.com/favicon.ico">
If you're not sure where your header tags are, look at this example. You want to make sure this code that you are putting in falls between the <head> and </head> tags...see this sample for further information:
<html>
<head>
<title>Your Site Title</title>
<META NAME="description" CONTENT="Description of your site...">
<META NAME="keywords" CONTENT="Keywords for your site...">
<LINK REL="shortcut icon" HREF="http://www.yoursitename.com/favicon.ico">
</head>
Now check your web site, your favicon should show up now in the browser bar! Now wasn't that easy?
;)
Links;)
Archives
Anna- Thanks for the great info! I feel really pleased when I bookmark a site with a favicon...so much easier to work from. I would be designing a favicon for myself and CLIENTS!!!