Skip to main content

Image Cropping Guide

Circle Crop — Round Profiles, Logos & Design Handoffs

Chat apps display a circle. Files are usually rectangles. Frame a balanced square here, then apply the round mask where the pixels actually ship.

Frame circle / round profile intent on Canvas (clip-path / alpha PNG roadmap for true round export). Convert HEIC to PNG for logo and icon handoffs into Photoshop, Canva, Figma, or Illustrator.

Loading image cropper…

Prefer the main tool? Open our free crop image editor — also called our browser image cropper.

Written by Safaat Rahman Siham, Founder & Developer at Convertify4u. Contact us.

Circles are a mask, not a magic file type

People search for a circle crop when they want a round profile picture. JPEG and most PNG exports are still rectangular bitmaps. The round look comes later: CSS `border-radius: 50%` or `clip-path: circle()`, an alpha PNG with transparent corners, or a mask in Figma, Canva, Photoshop, or Illustrator. This page is the honest prep: center the face or mark in a square so the eventual circle does not clip ears, horns on a logo, or the wordmark. If you place a subject using a rectangular preview only, the corners you “kept” will vanish in chat. Leave padding inside the square equal to what the circle will hide. Favicons and Apple touch icons are their own sizes (16, 32, 180 px and friends) but they still start from a clear square mark — trim here, then scale. Banners and blog heroes are usually not circles; do not force a radial mask onto a wide header. Thumbnails in some CMS themes are circles; others are rounded rectangles — check the theme. For logos, a true round badge often needs a transparent PNG after this frame; start from HEIC-to-PNG if the source was an iPhone snap of a sign, or from SVG in a design tool if you still have vectors. Convertify4u’s Canvas control may preview a circle while exporting a square; treat that preview as a guide. The design tool finishes the alpha. Background Remover helps when you need a cutout before the round mask. None of this replaces a passport’s rectangular rules — identity documents almost never want a circle.

How it works

  1. 1

    Lock a square with the subject in the middle

    Circles are inscribed in squares. If the face is left-weighted in a wide photo, the mask will dump half of it. Center first, then think about roundness.

  2. 2

    Leave room the radius will eat

    Anything in the four corners of the square will disappear. Hair buns, logo serifs, and headset mics need inward padding. Preview a circle overlay in your head or in CSS.

  3. 3

    Export, then mask in the tool that ships the UI

    Download the square (PNG if you will punch transparency). In Figma or CSS, apply the circle. For a true transparent badge, delete the corners on an alpha layer — not by hoping JPEG invented transparency.

Use cases

Chat and HR avatars

Slack, Teams, Discord, and many HR directories clip to a circle. A square that already honors that clip stops surprise haircuts.

Logo badges and icons

App icons and favicons start square. Round-rect or circle masks are a later platform choice. Keep important geometry inside a safe inner circle.

Site thumbs that happen to be round

Some blog themes use circular author photos or circular product chips. Frame as if the corners are gone even if your CMS still stores a rectangle.

Handoff into Figma, Canva, Photoshop, Illustrator

Designers want a clean square (or PNG cutout), not a pre-baked JPEG with fake black corners. Do composition here; do the vector or alpha mask there.

Problems we solve

A rectangular export that “isn’t round”

That is normal. Apply clip-path or an alpha mask at display time. A JPEG cannot hold round transparency. PNG can, after you punch the corners in an editor.

Logos clipped by auto-circles

Wide wordmarks die in a circle. Either pad them into a badge or do not use a radial mask. Tightening a wide logo does not make it circular-friendly.

Using a round avatar crop on a passport form

Governments want rectangles and legal headroom. Finish identity photos on the passport spoke. Circles are for products and chat, not MRZ documents.

Trust, speed & privacy

Brand assets stay in the tab

Unreleased marks and employee photos are framed on Canvas locally. We do not file them in a Convertify4u brand library.

Quick enough to try three centers

Circle-sensitive placement is iterative. Local encoding means you can nudge, export, drop into Figma, and repeat without a render ticket.

Same prep on every OS

Frame the square on Windows, a Mac, Linux, or a tablet, then finish the mask in whichever design tool your team actually ships.

Frequently asked questions