Making icon background transparent

Log-in or register.

Making icon background transparent

Icons can have and usually have transparent regions. You may say that their background is transparent and you can see the real background (for example your Desktop wallpaper) behind the icon.

This guide will show you how to prepare your images before conversion to icons to make the background of the icons transparent and allow the real background to show itself. If you only have an .ico file instead of an original picture, the problem is a much harder, but the instructions stay the same. In case of a small .ico file, you will not be able to hide inaccuracies in the resizing process and added shadow; also, there are no explicit eraser tools in the icon layout, you'll have to switch to the transparent color manually.

How to remove background

Removing background around the dog.

The image on the right demonstrates the difference that can be achieved when background is removed from an image before it is converted to icon.

To obtain the lower icon, the unwanted regions must be manually erased. The process is not hard, but it may be time consuming if the background and foreground are not easily separated.

Start by opening the source image in RealWorld Icon Editor and crop it to the region with the object of interest (use the transformation tool, select region, right-click and pick Crop to selection from context menu). The picture used in this example is already cropped.

Then use the Eraser tools (the 3 tools with chequered icons) to erase portions of the background:

  • Rectangle eraser removes rectangular region of the background and is a good starting move to remove large portions of image around the edges.
  • Floodfill eraser removes pixels with similar color as the clicked pixel. It is useful to remove for example the grass in the above example. You can adjust tolerance and pixel matching modes.
  • Pencil eraser is intended for the fine work of erasing individual pixels.
  • You may use other tools for erasing by selecting completely transparent color. This way you may erase for example with brush or polygon, which may be handy in some cases.

that of the helps regions, rectangles, or individual pixels.

The larger your source image the better. Erasing will never be 100% accurate, because there is some color blend in every photo. If your image is large enough, the inaccuracies will not be visible after conversion to icon. You can see that the shadow effect (added automatically during conversion to icon) nicely compensated the background pixels left in the picture due to the dog's fur.

The process of removing background can be very fast if the source picture contains for example a human in front of a solid-color wall (simply use the floodfill eraser on the wall) or it can be more complicated as in our case, where the fur complicates the process and it will take you a couple of minutes to finish the work.

Once you have the background removed, you can convert the image to icon. Before you do that, consider removing the empty background to maximize the size of the object on the picture. It may be also useful to adjust brightness and contrast.

A video tutorial

How to make icons from photographs

Recent comments

user icon GrandBub registered user on February 10th 2012

I guess I'm doing something wrong. I used the wizard to create an icon from an image (which was a transparent PNG). It appears transparent in the icon editor, but when I save it and use on my Win 7 desktop, the background is black.

user icon Vlasta site administrator on February 10th 2012

Are all the images inside the icon transparent? Was there an ico file with opaque background and with the same name before? If yes, Windows may have the old thumbnail cached (make a copy of the icon to see the correct preview).

user icon Anonymous on July 6th 2012

ive discovered that after opening a png with photoshop and then saving it as a psd, it is possible to make a working icon. i then converted this saved psd image to a RSRC file. I can make this into an icon but it has a white background even though the image is a png, how can i get rid of the white background?

user icon Anonymous on July 8th 2012

follow your directions and the eraser does not erase = useless it makes the background BLACK. Why call it ERASER if it does not erase. Should be called color changer tool.

user icon Vlasta site administrator on July 8th 2012

if you see black instead of transparent perhaps you have saved the file in a format that does not support transparency (like .jpg) - try saving as .png aftr you hae used the eraser

user icon Anonymous on November 8th 2012

I can make this into an icon but it has a white background even though the image is a png, how can i get rid of the white background? I have the same issue.. my icons have a white background and are coming from PNGS help i have a deadline at work...

user icon Vlasta site administrator on March 1st 2013

.png is not a silver bullet, it merely allows transparent pixels to be in an image, but it is up to the person, who made the .png to actually make some regions transparent

user icon Anonymous on October 16th

:-D excellent!

user icon Anonymous
Vista & Win 7 icons
I wish there were...