We’d not only like to detail more advance tutorials here, but also post a few tips to help the website design beginners amongst us. After all, we all had to start somewhere ourselves.

A Favicon is a small image (usually a logo) which shows up beside your bookmarked website as well as in your browsers location/address bar.

1) Before we begin, you will most probably need to download the Windows Icon (ICO) file format Photoshop Plugin in order to export the .ico file format required to create your favion. The plugin can be downloaded here. (Note: you will have to move the downloaded plugin to the correct location on your computer; it’s usually: C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats.)

2) Once that is done; open Photoshop > File > New and create a document of 64 x 64 pixels.

3) Now either create your image, or drop and drag a pre-designed image into the newly created document. Scale the image down as you see fit in relation to the files 64 pixel size.

4) When you’re happy with your image, go to Image > Image Size. Make sure the Constrain Proportions box is ticked.  Alter the width size to 16 pixels. The height should change automatically to 16 pixels also. Click Ok. You now have your Favicon size.

5) File > Save As. Name your file ‘favicon’. Be sure to change the file format from the drop down menu to: ICO (Windows Icon). Click Ok.

6) Now place your favicon.ico file into the root directory of your website – the same directory as your website’s index file. Open the index file and place the following code between the < head > </ head > tags:

<link rel="Shortcut Icon" href="favicon.ico" />

7) That’s it! Upload your site and view it, your new stylish favicon will now be evident from this point on. Congrats!