Creating a Favicon with the Gimp

Creating a Favicon with the Gimp

It’s the fine points that tend to differentiate the good from the great websites. One thing you can do to give your website a more professional look it to create a custom favicon. For those who don’t know a Favicon is the small image to the left of the Page Title, see below for an example. If you have a logo that is reasonably simple and square your set. Allot of sites use some sort of initial and in our case we used the first initial of the company name.

 

Favicon

Example of a Favicon

There are many options for creating a Favicon, one being to use the free software¬†The Gimp. A bonus is this runs under Windows, Linux, Mac OSX and FreeBSD so it’s highly likely it runs on your desktop.

 

Create new image

Create New Window

In the Gimp you need to create a new image, we recommend 256×256 and while we will need to shrink it to size this gives your enough breathy space to create your image. When you open the “Create a New Image” windows click on the “Advanced Options”. Here you can adjust the background fill including transparency. Click Ok and you have your canvas. Now create your image.

 

Now the image is done, time to export

Now the image is done, time to export

 

A Favicon is actually 32×32 so after we’ve finished with the graphics the image will be resized before being exported using the .ico extension. Please note for anyone trying a transparent that you can get side effects like stretching of the image if you don’t create a separate black (transparent) layer before exporting the final image. Well at least that’s been my experience, yours may differ.

 

Now that you’ve resized the image go ahead and export it, ensuring your use the .ico extension.

Leave a Reply