How to make an icon from a picture that isn't square

Load the picture into ICON by Zaweba and choose how it should fit the square: Contain keeps the whole image and pads the empty sides with transparency, while Cover fills the square and crops away the edges, keeping the centre. Then make your .ico, set a program's icon or build the favicon set as usual. Nothing needs cropping in another editor first.

Icons are always square. A Windows .ico, a favicon and a touch icon all expect the same width and height, so a wide logo or a tall photo has to be turned into a square somehow. The only real question is whether you would rather keep everything and accept some empty space, or fill the space and lose a little at the edges.

What you need

Any picture Windows can open will do. ICON loads PNG files and the other common raster formats Windows can decode, such as JPEG, BMP, GIF and TIFF, and even an existing .ico. A PNG with a transparent background is the most useful starting point, because transparency is what Contain uses to fill the gaps, and a logo on a clear background looks tidy at every size.

Size matters more than shape. The app's own advice is that a picture of 512 pixels or more keeps the small sizes sharp, so start from the biggest version of the artwork you have.

Step by step

Open ICON and load your picture. It appears in the preview on a checkerboard, which is how you see which parts are transparent. Now pick the fit. With Contain, the whole picture is scaled down until its longest side matches the square, and the shorter direction is padded with transparency. A wide wordmark ends up as a band across the middle with clear space above and below. With Cover, the picture is scaled up until the square is completely filled, and whatever spills over the edges is cut off, keeping the centre.

Look at the preview after each choice. Once it looks right, carry on with whichever job you came for. The same loaded picture, with the same fit, feeds the multi-size .ico, the icon written into a program, and the full set of website favicons, so you only decide this once.

Which fit to choose

Contain is the safer choice for logos, badges and anything with lettering. Nothing gets cut, so a name never loses its first and last letters. The cost is that the artwork is smaller inside the square, which can make it look faint at 16 pixels in a browser tab.

Cover suits photos and artwork whose interesting part sits in the middle: a face, a product shot, a single bold symbol in the centre of a banner. It gives the fullest, boldest icon, but anything near the edges of a wide picture is lost. If the subject is off to one side, Cover will cut it, and you would do better to crop the picture yourself in an image editor first so the subject sits in the middle.

A tall picture behaves the same way, just turned through ninety degrees. Contain leaves space on the left and right; Cover trims the top and bottom.

Getting a good result

Think about the smallest size. An icon is mostly seen at 16 to 48 pixels, in a taskbar, a tab or a folder window, and a long wordmark squeezed into 16 pixels is just a smudge. If your logo has a symbol as well as a name, a version with only the symbol often makes a far better icon than the full logo. That is a choice about the artwork, and it is worth making before you load anything.

Transparency is another thing to watch. Contain pads with transparency, which looks fine on a light or dark background alike. If your picture has a solid white background of its own, though, the padded icon will show a white rectangle inside a clear square. Starting from a version with a transparent background avoids that.

For websites, remember that the favicon set includes larger icons too, such as the 180 pixel Apple touch icon and the 192 and 512 pixel Android icons, so the fit you pick shows up big on phone home screens as well as small in tabs.

Other ways to do it

You can always square the picture yourself beforehand in Paint by Zaweba or another editor, adding a margin or cropping exactly where you want. That gives the most control when the subject is off centre. For everything else, Contain and Cover in ICON by Zaweba do the job in a click, offline, with the picture never leaving your PC.