Glenn Haggard | 
05 16th, 2009| 
Also known as favorite icon, website icon, shortcut icon, url icon, bookmark icon.
The power of marketing is amazing. Humans get accustomed to seeing certain things (like logos) and immediately recognize and have a sense of comfort with that household product. The favicon is an excellent branding tool. Not only does it show up next to the address bar in your browser, but it also is displayed on each tab (assuming you are using a browser that supports tabs), and also in your favorites. The human eye will focus on the icon as soon as it’s recognized and disregard the text.
To create a favicon you must first have an image that will be your logo. The image has to be in either 16×16px or 32×32px size and either 8-bit or 24-bit color. Once your image is selected to easiest way to get it to the proper size/format is to use a website the creates it for you. Google for the word "favicon" and you will get many hits that will allow you to just upload your image and then you can download the finished result. Here are a couple of examples:
http://www.favicon.cc/
http://www.html-kit.com/favicon/
Once you have your image upload it to your webserver. Then, modify the your code between the <head> and </head> of your website with the following text:
<link rel="shortcut icon" href="favicon.ico" >
or
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" >
If you are using Wordpress this will be in the header.php file within your theme.
) create a rectangle. Then, select the rounded corners option 
. The higher the radius the larger the rounded corners will be. You can move the slide bar left and right and watch the results on the canvas. Now pick a color to fill your button with. For this example I chose the color 
) and then click on the foreground (
) and set the color that you want by either pasting the HTML code or just picking from the color palet. Now, just click in the center of your rectangle and it should look like this:
) and draw a line from the bottom of this new rectangle to the top. This will create a fading affect from the colors that are in your foreground/background (
) and draw a rectangle where you want your text. This should be centered vertically and horizontally. Don’t worry worry if you draw it wrong, it can be moved. Now, type the text you want in your button. There are several text options on the left panel that I’m not going to go into. They are your typical MS word-like tools (font, colors, size, bold, italics, etc.) that allow you to put some pizaz in the text. Now your button should look like this:
.
