Website favicons
Most websites these days have a little graphic/logo in the address bar next to the website address, called a favicon, which in our opinion adds a great finishing touch to any website and helps to tie the website and branding into the browser, increasing its prominence and making a website look more professional.
Wikipedia says: A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of his own from the hard drive and associate it with a website.
To display your own logo as a favicon, simply take a picture or your logo or any graphic (of any size / resolution – better if it’s completely square, ie 200px x 200px) and visit one of the websites listed below and follow their instructions.
Websites that can generate favicons for your website, (own picture/graphic required).
http://www.html-kit.com/favicon/ (my personal favourite)
http://tools.dynamicdrive.com/favicon/
Once you’ve created and downloaded your new favicon, it’s time to add it to your site. To do so, follow the simple procedure below:
1. Upload the generated file (“favicon.ico”) to your site via FTP. Verify it’s there by typing http://yoursite.com/favicon.ico in the browser’s location, where “yoursite.com” is your site’s address. You can put it anywhere within your site’s folders as long as you reference its new location.
2. Next, insert the below code in the HEAD section of your pages, usually somewhere below the TITLE tag:
That’s it! Note that your favicon may not appear immediately after you’ve completed the above two steps, but if you clear your browsers’ cache or test in a different browser it should work fine.
