Crop a square image to a circle and about 79 per cent of the area survives. The missing fifth is entirely corners, which is where a square logo usually keeps the parts that make it a square logo.
Almost every platform crops profile pictures to a circle now, and almost every brand asset was drawn as a square. That mismatch is the whole problem.
What size is it really shown at?
Much smaller than the version you upload. A profile picture appears beside posts and comments at around forty pixels across, and the large version on a profile page is seen far less often.
| Where | Roughly |
|---|---|
| Beside a comment | 24–32 px |
| In a feed post header | 32–48 px |
| In a follower list | 48–56 px |
| On the profile page | 100–180 px |
That top row is the one to design for. At thirty pixels there is room for one shape or two letters, and anything more becomes a smudge that reads as a generic default.
Uploading at a much larger size is still correct, because the platform generates the smaller versions from it. The design decision is about what survives the shrinking, not about the file.
What works for a logo?
The mark alone, centred, with margin around it. Removing the wordmark feels like a loss and is what makes the image recognisable at the sizes it is actually shown.
A single letter set in the brand typeface is the reliable fallback when there is no compact mark. It survives the circle, it survives the shrinking, and it is instantly distinguishable from a photograph in a list.
Giving the mark a filled background rather than transparency is worth doing here. A transparent logo sits on whatever colour the interface uses, which differs between light and dark modes and between platforms.
What works for a face?
A tight crop. A photograph framed as a portrait becomes a small oval containing an unidentifiable person, because most of the circle is occupied by shoulders and background.
Cropping so the face fills most of the circle solves it, and it looks aggressive in the editor and correct everywhere it is used. The test is to shrink the result to about forty pixels and see whether you would recognise yourself.
Background matters more than it seems. A busy background at thirty pixels becomes noise around the face, and a plain one with contrast against the face reads cleanly at every size.
Does it need to work on both themes?
Yes, because platforms do not swap it. One image sits against a light interface for some viewers and a dark one for others, so anything relying on the surrounding colour fails for half of them.
The practical rule is that the image should have its own defined edge — a filled circle of its own colour — rather than fading into whatever is behind it. A white logo on transparency disappears on a light theme.
It is the same reasoning behind giving a favicon its own filled shape, and for the same reason: the surroundings are not yours to control.
Should it match across platforms?
Yes, and it is one of the cheapest recognition wins available. The same image everywhere means someone who has seen you once identifies you at a glance somewhere else, at a size too small to read a name.
Changing it frequently costs that. The picture is the identifier people actually use in a scrolling list, more than the name beside it.
The banner article covers the other half of a profile, which has the opposite problem: a banner is large and cropped by width, and the avatar sits on top of it.
How much of the square survives exactly?
About 79 per cent. The area of a circle inscribed in a square is π divided by four of the square’s area, which comes to a little under four fifths — so roughly a fifth is discarded, and all of it from the corners.
That is the arithmetic behind the practical advice. A design filling its square edge to edge loses its outermost content on every side, and a design centred with margin loses nothing that was doing work.
The same fraction applies to a rounded square with a generous radius, which is why one design usually serves both crops.
Questions people ask
How often should it change? Rarely. It is the identifier people recognise in a list before they read a name.
Does animation work as an avatar? A few platforms allow it and most take the first frame. Design for the still image.
Should a team share one style? Consistent framing and background across a team reads as deliberate at small sizes, where individual photographs do not.
Are all platforms circular? Most are. A few use a rounded square, and a design that works in a circle works in both.
Can I upload a transparent PNG? Yes, and it will be composited onto a background you do not choose. Give it its own.
What size should I upload? Larger than the biggest displayed size, square, and let the platform generate the rest.
Why does mine look blurry? It was uploaded below the profile display size and scaled up.
Design for the smallest circle. The profile picture maker applies the circular crop so you can see what survives it, and the per-platform sizes for Instagram, Facebook and TikTok give the dimensions to upload.