how to make a favicon
How to make a favicon?   How to make an XML sitemap?   How to add a favicon to your blogger URL easily?
How to make a favicon for your website or blog.

What is a favicon?

A Favicon is also known as a website icon, URL icon, or bookmark icon. It is the little graphic that displays in the top left of the browser address bar, the sites bookmark and sometimes the tabs bar on the users browser window.

A favicon is a file containing an image or images usually at 16 x 16 pixels in size.

You can use any graphics program to make a favicon but you need to be able to see it magnified and at final size while you are working on it to get the best from it. The 16 x 16 pixel image is a small size so there are some interesting design issues to overcome.

I used Photoshop to design the icon for the site
(bottom left of this page).
(you can see the enlarged version on the right).

the icon image enlarged 

How to design a favicon?

To make a favicon work well it needs to be clear at 16 x 16 pixels so for a simple solution I chose the letter H for the logo. I viewed this at 100% magnification until it was readable at 16 x 16 pixels. Enlarging the image to about 400% made it easier to edit and work on the 2 layers I needed.

For the background layer I played around with some ideas and blends until I had something that looked fairly smooth at its final size and the foreground layer contained the un rasterised letter to allow for font changes. Both of these layers were then flattened onto a single layer when it seemed that the image was correct.

At this point the icon was magnified to make tiny adjustments to tones and shape, giving the logo a slightly rounded edged look. Next it was saved in a jpeg and a PSD format so I could make changes later without losing quality on the jpeg. You don’t need to save the favicon in a PSD format but it is useful if you decide to change something later on.

How to make a favicon

The .ico format is standardized file format that can be used as a favicon, so you need a way to convert your image into an .ico file before uploading it to your site. There are many free and paid services that do this on the internet you just upload your jpeg or gif image to them and press convert and your .ico file is ready to be used.

Don't have the time or skills - perhaps we could do it? (click for pricing and details).

Search for .icon converters and you will most likely find one that meets your needs.

The final stage is to upload the newly created .ico file to your root directory on your server and the icon should be ready to view in your browsers address bar. If it doesn’t display immediately try closing down your browser and trying a fresh restart.

 How to make a favicon?   How to make an XML sitemap?   How to add a favicon to your blogger URL easily?