• .
  • .

Ways to create a Favourite Icon (Favicon)

A favicon is a tiny 16 pixel x 16 pixel icon displayed on your browser’s URL bar on the bookmark list and for certain other browsers it is visible on the navigation tab. A favicon does not assist in increasing traffic on your site however it will definitely enhance the appearance and look of your blog or site. You can create a distinctive icon which will help distinguish your site to visitors.

Generic Guidelines:

A favicon file has a .ico extention and its quite a task to put complicated graphics in a tiny frame. Remember while designing a favicon you need to focus on simple letters or images.  Always choose a color which is close to the color of your website, so visitors are able to associate it with the site.


Photoshop Icons:

Adobe Photoshop is a preferred alternative for good favicon designs. However, a standard Photoshop is unable to handle .ico extensions, so you will need to download a Photoshop Plugin. Once that’s done, create a 64 x 64 pixels canvas and start exploring. After you have designed the favicon, you need to resize the image. You can click on Resample image from the Image Size Menu and this will ensure that the image is not a blur as you scale it as per your requirement. Now save the 16 x 16 image as a favicon.ico extension.


MS Paint and Web Tools:

You can use MS Paint to create a favicon as these are simple images. The simplest way to make one is by creating a 32 x 32 pixels JPEG image using Paint and after that use the service “Favicon from Pics” to convert the image from JPEG in a favicon.ico extension file.


Upload the favicon.ico file:

Once you have designed and created the favicon.ico extension file you can upload it directly to your site. Make sure to place it always in the root directory, this is where the index file is located.


Change the header:

A header is the code which goes between the tags. You have to add the following line:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
This will change the header and you will see that this code works if the favicon.ico extension is located only in the root directory.


Test It:

Next step is to test it, all you need to do is open your browser and check if the favicon is appearing. Try and bookmark the site and open some more tabs to check how the icon looks. You can always make changes by going back to the drawing board.

Leave a reply