Sunday, 2 January 2011

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.

CoffeeCup

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.

image

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.

image

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.

image

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.

image

Finish

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

image

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

References

image 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.
image 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

3 comments:

  1. You can convert the .png creates in inkscape to .ico with multiple formats in free online services like http://www.rw-designer.com/image-to-icon No need to download special tool just for that.

    ReplyDelete
  2. let's me try
    thank you

    vina

    ReplyDelete
  3. Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work! favicon

    ReplyDelete