How to Create a FavIcon

I would imagine that your first question would be, what exactly is a FavIcon? It's a 16x16 pixel icon that displays in the website address bar or in the left corner of the browser window, if you tab your windows, you will notice this helps you to navigate through the tabs by distinguishing one website from another.

Creating your image file

Open up a new document by selecting the File menu and choosing the NEW command. Make the canvas size at 100 pixels wide and 100 pixels in height. Choose 72 dpi for the resolution. Once you have created the design for your FavIcon you can resize it down to 16x16 pixels. This will be your final canvas size for your image. Remember to maintain your image dimensions to keep your image sized proportionately.

When creating your image make sure that you keep it simple so that your users will be able to make out the image at 16x16 pixels. Once you are happy with your image, Select Image and then Image Size from the Photoshop Menu and change your height and width to 16.

Once you are satisfied with your favIcon, choose Save As and make sure that you change the file format to .ico and name it favicon.ico. Make sure you do not name it anything else because the server will not recognize the file.

If you do not have Adobe Photoshop and need to make a FavIcon for your website, you can visit here to make a FavIcon from an image you already have on your hard drive.

Uploading your image file

Now you should be ready to upload your favIcon to your website. Make sure you save your image at same level as your index.html file. Theoretically, you should not save this file in the site's Images folder. Always make sure that it is on the same level as your index.html file for easy accessibility.

To make sure that your image is displayed properly, you must add the follwoing lines of code inside the <head></head> tags on your page.

<link rel="shortcut icon" href="" />
<link rel="icon" href="" />

And that pretty much wraps that up. I hope you enjoy your new favIcon.