Create icon with Inkscape and IcoFX

Inkscape and IcoFX are two open source and freeware graphical programs. Inkscape is a powerful vector based program, similar to Adobe InDesign or Corel Draw. It can be used to create an image. IcoFX does work of importing these images created with Inkscape and saving them as ICO files. In this post I will show how to create ICO files of different sizes based on the image below I created in Inkscape.

Step 1: Create a 64x64 Inkscape document

Open SVG source file of the image in Inkscape. Select the whole image you want to make an ICO from and group all selected objects of the image with (Ctrl+G). Copy grouped image and create a new Inkscape document from File menu. For this example I selected File>New>icon_48x48. Paste copied image into new Inkscape Window. With my image I had to zoom out and resize copied object to fit icon size page. Make sure you lock the width and height to make scaling of the image same. Also it is handy to use Align and Distribute tool to set object in the centre of the icon. In the result you should get something like shown below.

Step 2: Export Inkscape Icon into PNG file.

Now we can save our icon as PNG image. Select File>Export Bitmap (Shift+Ctrl+E). In the Export Bitmap dialog click Export area Page, Bitmap size change to 64x64 pixels for width and height. Give it a name and the path where to save a file. Click Export.

Step 3: Create ICO file with IcoFx

Start IcoFX and Open our icon in PNG file. Make sure you tick 48x48 size of the image in the New Image dialog as shown below.

The image will be imported and we will be able to save it as in icon. Click File>Save As and save it as an ICO.

Finish

Congratulations! We created our icon with the two powerful programs Inkscape and IcoFX.

To practice a bit more, try creating icons of different sizes. Enjoy!

References

	An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.
	IcoFX is an award winning freeware icon editor. It is an all-in-one solution for icon creation, extraction and editing.
Joomla Web Designer	Create your own custom Joomla favicon using Inkscape
Inkscape Tutorials	Creating a Coffee Cup with Inkscape