Website::Add small picture beside url address

.........Thats call Favicon...
When you visit a website like Google or Yahoo, you might notice their personal icon in the far left of the address bar. This is called a Favicon, and it is incredibly simple to create your own for your personal webpage. Following these steps will further personalize your website, as well as give it a more professional feel.

Steps: 
1. Secure access to your site's root directory through FTP (this may be the root directory of the server itself, or your user root directory if the server hosts multiple sites). You can use SmartFTP or any other method of your choosing. 
2. Example: To access the root directory of www.awesomesite.com through FTP, first open My Computer or any folder in Windows. 
3. The image must be a 16x16 pixel square. Use any graphics program such as Paint, GIMP, Photoshop, or (my favorite) freeware Irfanview. Just about all graphic programs allow you to crop an image to a square. Only a few have the save as ".ico" option. Particularly, if you want to use Photoshop you will have to install a plugin like the free "ICO (Windows Icon) Format" Photoshop plugin at http://www.telegraphics.com.au/sw/ to be able to work with ".ico" files. You can create your favicon at a size of 32 by 32 pixels and it will still work, but keep in mind that most browsers will reduce it to a 16 by 16 pixels image before showing it in the address bar or bookmarks/favorites. Knowing this it may be prudent to just start with a 16 by 16 pixels image to retain control of how the final image displays. Irfanview allows you to take just about any image in any format, crop it square, reduce the size to 16 by 16 pixels, and then save it as a favicon ".ico". 
4. If you have a square image that you would like to use as a favicon then you might consider using a tool like Chami's "FavIcon from Pics" tool or other similar, free tools. If you don't have a photo or other image to use then begin a new image that is 16 pixels by 16 pixels. The complexity of your original icon is restricted to your own creativity and your knowledge of the image program you are using. 
5. Save it in a safe place, being sure to name your icon 'favicon.ico'. This is the only way browsers will be able to display your icon in the address bar. It MUST have that exact name. 
6. Open your site's root directory. 
7. Copy your icon and Paste it into your root directory. Your favicon should go in the same folder as the page that users first see when they browse to your site (usually called index.htm(l) or default.htm(l), but this may be different on your server). 
8. Close your folder. 
9. Refresh your website in your own browser. The browser should search for the FAV icon and display it. 


Alternate Method 

1. Create a folder as opposed to a file, in the web page folder of your html editor. This folder must be called favicon.ico 
2. Create a folder on your desktop, and name it something like Icon. Go to icon download sites on the internet using say, Google, and download some icons you might like to use (right click/'save image as'/save to desktop/Icon folder). For practice, an icon with a strong recognizable outline might be best. 
3. Use free download Irfanview (or comparable program) to adjust the size, color depth and extension of your icon. Put Irfanview in your desktop/Icon/folder. Open any downloaded icon or graphic in Irfanview from desktop icon folder. Click Image/Resize and resample. Type width 16 and height 16 pixels/OK. Open Image again and click Decrease color depth. Click 16 colors/OK. Open Options/Set file associations/check ico/OK. Open File/'Save As'/Binary encoding/Save transparent color and then 'save as' to desktop/Icon folder. Will name it for reference PieEye. 
4. Download the free program IconEdit32 or equivalent to fill and color your icon and put in Icon desktop folder. Open IconEdit32 click the 16 color box on right side. Open 'PieEye.ico' A small sample is shown on right. So for instance, any square one wants transparent, click transparent on the bottom right and fill in squares. Ditto to change colors. When done 'Save As'/ to your html favicon.ico folder in your html editor from the first step. 
* A means to add extra colors to the icons one works with in IconEdit32 is: open a downloaded icon or graphic on some kind of paint program (not Microsoft Paint). Paint a few extra colors on the corners and save in Desktop/Icon. Using Irfanview, resize, decrease color, set ico extension and 'Save As'. Open in IconEdit and you will have more colors to work with. 
5. Create an address on your html home page. Between the and copy inexactly. This may place the icon on all your address bar web pages. If only home page, may have to place on each page. 
6. Open your FTP transfer. Open your favicon.ico web page folder. Transfer or slide your favicon file (not folder), in this case PieEye.ico, over to your on-line web pages on the server. Next find the PieEye.ico file on the server, not your local html file, and change name PieEye.ico to favicon.ico - Depending on the browser, may have save home page to bookmarks to make it active. 


Separate icons on different pages of the same website 

1. Create folder called 'whatever' in your web page folder of your html editor. This is separate from the favicon.ico folder. 
2. Put into this folder the appropriate icon.ico files like PieEye. Transfer Folder 'whatever' to FTP server. On the individual html page between the put in where 'whatever' is the name of the folder and 'Daffy' is the name of the ico file. This should cause favicon 'Daffy' to apply to this page only. You may also try if you encounter problems with the aforementioned link tag. 
* The server-side favicon.ico file remains, and should cover all other pages. 
* Can individualize as many pages as desired. 
* Icons can be tricky so if one has problems perhaps consult Google. 


Tips 
* Even though your icon will be very small, be sure that other people can easily read/understand it. 
* 16x16 pixels is a standard size for small icons. This means that you can import already made icons from programs or off the web. 
* Speed it up with Linux! To avoid step 6, just choose an appropriate picture, open your command line, navigate to the directory where you store the pic and type: "convert picture.png -resize 16x16! favicon.ico" (replace picture.png with your pic's filename)done :-) 
* If you do not have access to ftp as in step 3, simply go to www.dynamicdrive.com, then look in the left pane near the top, under tools. There will be a favicon generator there which really is quite simple. 
* Using an icon editor like Digitope Pixelshop to create the favicon is better that a regular photo editor as icons are not simply small pictures, but are a special format. 

Warnings 

* Although you have created your favicon successfully, not everyone who visits your site will see it. Only Internet Explorer versions 5.0+ display favicons, as well as Netscape 7.0+, Opera 7.0+, and Firefox. Older browsers simply do not display your icon. Also, for a favicon to display in the address bar of Internet Explorer versions 5.0+ the page must first be saved as a favorite. Then it will show up the next time you click on the favorite or hand type in the URL in the address bar. There have also been issues with getting Safari to show favicons as well.