Photoshop Tutorial Create a favicon Icon for your website

A Favicon is the small icon which appears to the right in your address bar. This makes your site a little more professional looking, having your own little icon. In this tutorial, we will create a favicon and import it into Dreamweaver.

In Photoshop it is important to set a symmetrical dimension; the favicon must be 16 x 16 pixels if you can work within that area then do so, for visual reference above we start with 50 x 50 pixel and we will shrink the image to suit, if you decide to work in a larger area do not make your canvas too big as shrinking the image may result in you losing some clarity.

It is also important to not the address bar will only recognise .ico format, so your favicon extension must end in .ico

See this tutorial for an example of the HTML code required, create a Favicon icon.

The HTML code must be plaved with in your opening and closing <head></head> tags

This image must be stored not only in your images folder; it must be located on the main root of your directory and in the main root of any sub folders within your directory.

If you save as png you can concert to .ico online.

comments powered by Disqus