How to Make a Round Avatar — Without Anything Getting Cropped

You upload a neat logo to a profile — and the platform crops it into a circle, leaving scraps: corners sliced, text run off, half a letter beyond the edge. The circular crop is the standard of nearly every platform, yet everything uploads as a square, so the whole science boils down to one thing: placing the content correctly inside the future circle. Here are the safe zones, platform sizes, tools and typical mistakes.

The geometry: what exactly gets cut

A circle inscribed in a square covers ~78.5% of its area — meaning a fifth of your image is guaranteed waste, all of it corners. It gets worse: some platforms crop with a margin, and UI elements (the online dot, the stories ring) overlap the circle's edge. Hence the practical safe‑zone formula:

• The center (60% of the side) — the guarantee zone: the mark and essentials go here.
• The 60-80% ring — the risk zone: background elements that may be trimmed.
• Corners and edge — expendable: background only.

Platform sizes

One 800×800 master covers everything: platforms downscale on their own, while upscaling a small image losslessly is impossible — we explain why separately.

Making an avatar from a logo

1. Use the compact mark, not the full logo. Text inside a 40-pixel circle is unreadable — you need the icon version — see icon vs logo and why different versions exist for more.
2. A square canvas, the mark centered. In Figma: an 800×800 frame, the mark at 55-65% of the width, dead center. Overlay a circle template to confirm nothing pokes out.
3. Set a background. Platforms flood transparent backgrounds with their own color (dark in dark theme — and a black mark vanishes). Reliable: a brand background color + a contrasting mark — see picking that pair for how.
4. Don't draw the circle yourself. A common error is placing the mark in a white circle on the square "to be safe": the platform's crop lands slightly differently, producing an artifact ring at the edge.
5. Export PNG at 800×800 — why not JPG for graphics like this.

Making an avatar from a photo

For personal profiles and personal brands, portrait rules apply:

• The face in the circle's upper two thirds, eyes at roughly one third from the top: a tight waist‑up crop reads worse than a head with air.
• Crop yourself, don't trust the auto‑crop: the platform takes the square's center, not the face's.
• Contrast with the background. A face on a busy background merges at 40 pixels — remove or blur the background, add a solid backing.
• Tools: circular cropping exists in every editor — from macOS Preview to online croppers; in Figma, a frame with 50% corner radius previews the crop.

The check: three sizes

An avatar lives at three scales, and all need checking:

1. The profile page (~100-160 px) — almost everything looks fine here.
2. The chat list / feed (~40-48 px) — text and thin lines die here; this is the main check.
3. Micro contexts (~24 px): comments, reactions, "typing..." — only a color patch and a silhouette survive. Which is exactly why color is the avatar's main asset, as with favicons.

Common mistakes

1. The full logo with text — letters sliced by the circle, the rest unreadable.
2. Essentials in the corners — cut by geometry, no exceptions.
3. A transparent background — the platform picks the backing color for you.
4. A small source file — mush at any size above the chat list.
5. Different avatars on different platforms — recognition builds through repetition: one mark everywhere — see building that system for how.

Adjacent guides: a logo for a Telegram channel, for YouTube, for a VK community and logo sizes for every platform. Compact mark versions fit for avatars accompany most brands in the catalog.