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

- show all comments
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 2014

:-D excellent!

user icon Anonymous on December 17th 2014

nice, i need it! thanks :-)

user icon gloryinx registered user on August 17th 2015

THANKS FOR YOUR EXPERIENCE

user icon Anonymous on November 13th 2015

ok have an icon (WITH wording) in the png format ...but has a black background.....how do I make the whole icon transparent?...can I? ...I am looking for that so after its saved..it will go over anything....am I at the right place ....lol ...thanx

user icon Anonymous on March 5th 2016

Great product used it very successfully,thank you :-)

user icon Anonymous on January 3rd 2018

thanks

user icon Anonymous on August 10th 2020

bruh

user icon Anonymous on January 26th 2021

Ok

user icon Anonymous
I wish there were...
What about ICL files?