A favicon is a graphic image (an icon) associated with a particular website and/or web page. To start, you will need a graphic editing software such as Adobe Photoshop but if you don’t have one, you can choose on these great freewares that can be downloaded at Download.com:
1] IconEdit2
2] IrfanView
3] Paint.NET

or you can find icon resources on the web. (Take note of their Terms of Use).

Method 1: Upload a favicon.ico to your main root directory.
This .ico file (as shown below) will then be associated with your website.


Method 2: Locate your icon from an image link.
Edit your header page/section. Add this between the head tag:
<link href='http://example.com/favicon.ico' rel='shortcut icon'/> <link href='http://example.com/favicon.ico' rel='icon'/>

and it should look like this.
/* Some metags may be present here or style sheets, do not delete them*/ <link href='http://example.com/favicon.ico' rel='shortcut icon'/> <link href='http://example.com/favicon.ico' rel='icon'/> </head>

Be creative in designing your favicon. It may be a logo or a symbol that can be depicted by your visitors.

• Use Photoshop to Create a Still-Life Lamp, Nightstand, and Picture Frame
• Free Photoshop Brushes for Web and Graphic Designers
• Free Vintage Photoshop Gradients
• iPad GUI PSD – iPad UI Template To Start Designing Your Apps
• Free Vertical 2010 Calendar Downloads
• 60+ Really awesome Typography Showcases
• Send Christmas E-cards
• 49 Most Creative Photoshop Tutorials of 2009
• Top 20 Ajax Tutorials
• Massive Collection of Stunning Photoshop Actions