Creating An Icon From SVG

From Lojban
Jump to navigation Jump to search

coi jbopre, here is how I created the flag icon from the .svg file[1].

  1. First, I loaded the .svg in the free vector graphics program, InkScape.
  2. Then I saved .PNG files of the image at different sizes, by clicking <File> then <Export PNG Image>. You choose the size, then the file name, and then you click <Export>. You will be creating images of the following sizes: 256x256, 64x64, 48x48, 32x32 and 16x16. For now, make sure you only edit the width value, not the height, to match these. Otherwise you will change the image proportions. For example, if using the exact image above, the first .PNG you will export will be 256x181.
  3. Close InkScape, and open another free program, The GIMP. Open the 256x256 (256x181) file, and then select all other sizes, and drag them into the layer menu.
  4. For each layer in the list, right click on the layer and select <Layer Boundary Size>. Make sure this says 256x256 for example. This is where you change the height. Each layer will have a different size, as per the directions above. In the same dialog, click the <Centre> button, then <Resize>.
  5. Once you have ensured that the width and height are square, go to <File>, then <Export>. In the dialog that appears, change the file extension from <.png> to <.ico>. Click <Export> In this dialog, uncheck all boxes, and then click <Export>.

The file that is generated is your ICO file!

Here[2] is the one I created.

Notes: I changed the colours of this icon using InkScape, because the wiki colours soon become very washed out. It is very difficult to keep the image nice, and the colours visible, at the same time.

Note 2: It appears that 256x256 isn't supported. I've only made icons for desktop applications, so this is possibly a limitation of webservers. So there is no need to make the 256x256 .png at the beginning. Just the other sizes.