Contain or Cover: fitting a picture into a square icon
How the Contain and Cover choices in ICON by Zaweba turn a wide or tall picture into a square icon, and how to pick the right one for each job.
Icons are square. Logos, photos and screenshots usually aren't. Somewhere between the picture you load and the .ico or favicon you save, a wide or tall image has to become a square one, and the Fit setting in ICON by Zaweba is where you decide how that happens.
There are two choices, Contain and Cover. They sound alike, they behave very differently, and the right one depends on what is in your picture.
What each choice does
Contain keeps the whole image. ICON scales the picture down until its longest side fits the square, then fills the leftover space with transparency. A wide logo ends up as a band across the middle of the icon with clear space above and below it; a tall one sits in the middle with clear space at the sides. Nothing you drew is cut away.
Cover fills the whole square. ICON scales the picture until its shortest side fits, then crops what spills over, keeping the centre. A wide photo loses a strip from the left and right, a tall one loses some from the top and bottom, and the icon has no empty margins at all.
Because the checkerboard preview shows transparency, you can see the difference straight away. With Contain, the padding shows as checkerboard. With Cover, the picture runs right to the edges.
Choosing for a logo or wordmark
For a logo with lettering, Contain is almost always the safer start. Cropping the ends off a name looks like a mistake, and a favicon with half a word in it helps nobody. The catch is size: a long wordmark squeezed into a square becomes a thin strip, and at 16 pixels that strip may be only a few pixels tall. If the result looks like a smudge in the small sizes, the picture is the problem rather than the setting. A square version of the logo, perhaps just its symbol or first letter, will make a far better icon.
Contain also suits pictures that already have a transparent background, such as a PNG exported from a drawing program. The transparent padding blends with the transparent edges you already had, so the icon looks deliberate rather than boxed in.
Choosing for a photo
Photos are the natural home of Cover. A photo has a background of its own, and transparent bars beside it look odd in a taskbar or a browser tab. Cover keeps the middle of the shot and fills the square, which is usually where the subject is anyway.
The thing to watch is the crop. Cover keeps the centre, so a subject standing off to one side of a wide photo may be partly cut away. If that happens, crop the photo yourself first in an image editor so the subject sits in the middle, then load it again. The preview will tell you before you save anything.
How Fit carries through to every output
One loaded image feeds all three of ICON's jobs: the multi-size .ico file, the program icon and the website favicon set. The square you settle on with Fit is the square every size is made from, so it pays to get it right once, before you save anything.
That matters most for favicons, where the same picture appears at very different sizes. The 512 pixel Android icon and the 180 pixel Apple touch icon show plenty of detail, while the 16 pixel favicon shows almost none. A Contain icon with wide transparent margins may look neat at 512 and tiny at 16. A Cover icon fills every pixel at every size, which can help the small ones read. Look at the preview with the smallest sizes in mind, not only the biggest.
Mistakes that are easy to make
Loading a square picture and worrying about Fit at all. If the picture is already square, Contain and Cover give the same result, so there is nothing to choose.
Using Cover on a logo with text near the edges. The crop is silent, so check the preview before saving rather than finding a clipped letter in your taskbar later.
Expecting Contain to add a coloured background. It pads with transparency, which is what Windows icons and favicons normally want. If you'd like a solid backdrop behind a wide logo, add it to the picture before loading it.
Forgetting that ICON is working from the picture you gave it. Fit decides the shape, not the quality. A tiny or blurry source will still give a tiny or blurry icon, so start from the largest, cleanest version you have.
Getting Fit right takes a few seconds and a glance at the preview. After that, the .ico, the program icon and the favicon set all start from the square you chose, so a wide logo and a tall photo both come out looking intended, all on your own PC.
