The lAbbiT's Journey

♥ Tutorials - Personalise your Favicon ♥

Favicon..

is an abbreviation for Favourite Icon, commonly known also as page icon. An example is the rabbit icon displayed beside the url of my site (i.e. http://www.a-spirate.com/) at the address bar of your browser.

Tools required..

Adobe Photoshop
This guide is written for adobe photoshop users. Alternatively, you can still follow my guide using any other graphics software that enables you to save your file as *.ico.)

Before you start..

Make sure that your adobe photoshop has the "ico format" plugin which will enable you to save your image as *.ico format.
You can download the plugin here. Download the one that is compatible with your system.
Install the plugin by placing the downloaded file (i.e. ICOformat) into YOUR_PHOTOSHOP_FOLDER\Plug-Ins\File Formats.
Open your Adobe Photoshop to start making your favicon. Your adobe photoshop should now be able to save images in *.ico formats.

Making your personalised favicon

Create a new document in Adobe Photoshop with the size of 16px x 16px, and name it as favicon.ico. Any discrepancy will result in an image distortion.
Pixel your design onto the document.
Upload your favicon.ico to the root directory, i.e. http://yourdomain/ or http://yourhost/yourdomain, of your server where your index page lies.

Adding the html codes

Copy and paste following the code in between <head> and </head>

Back to the tutorials page