The Humble Favicon!

The easiest way to give your site a touch of polish is to add a Favicon! A favicon is the little thing you see next to the web address and on the tab of the website - It also shows up next to your favourites so is an important visual indicator for your site which can help jog people into coming back!

Favicons can be extremely quick to make here is my technique:

1. Remember favicons are 16x16 pixels so there isn't room for a lot of detail - You want something punchy! (Having said that though it is quite amazing the level of detail some favicons contain within them!)
2. Generally I use illustrator to come up with something and then use the artboard tool to create a square box around it... Then I use 'save for web'.
3. If possible save your about to be Favicon as a PNG-24 and make sure the transparency box is ticked - Save it to desktop or wherever...
4. There are many websites available that create favicons for you and many do it in different ways but m general port of call is dynamic drive specifically: http://tools.dynamicdrive.com/favicon/
5. Once there you simply browse for your image and press 'create icon'. You will be presented with a graphical representation of how it will look once in place - If your are happy with how it looks press 'download favicon' otherwise go back to step 2 again and adjust it.
6. You now have a working favicon and to get it up and running you need to upload it to your website... There are a number of different places where you can put it...
   1. If it is a simple HTML site generally you can just upload it to the base directory (public_html etc).
   2. With a CMS such as Joomla you can upload it to the template folder of the template you are using (with Drupal you can just use the PNG file you created with illustrator, go to your theme options in the backend and upload it).
   3. It will now be visible to all new viewers of your site but not to you... You need to clear your cache which you can do with either the web developer toolbar > Miscellaneous > Clear Private Data > Cache or with FireFox > Tools > Clear Recent History > Cache (For other browsers you are on your own!)
7. Sorted! Your website will now have a favicon - And will look an damn site smarter!

For developers having a Favicon setup can really help - If like me you always have a million tabs open at once (and a load with Drupal and Joomla generic favicons) it really helps having favicons to help you navigate to your websites. Recently I have also been creating a range of different coloured favicons of the same design so I can use them for the many different installs of my site (i.e Local, Testing, Remote and also frontend and backend)