UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Profile Photo

Circular PFPs with custom borders

About Profile Photo

A clean profile picture is the first thing anyone sees on a forum, Slack community, dating app, or personal portfolio. Cropping a photo into a perfect circle, adding a border, and exporting at the right size without Photoshop takes longer than it should. This tool runs entirely in your browser — no upload, no server, no privacy risk. Drop in any photo or logo, drag and pinch to reframe, choose circle or square crop, set a border colour and thickness, pick a background, and download a PNG or JPEG in under 30 seconds. Most platforms display avatars as circles even when they accept square uploads, so the live circular preview shows you exactly what visitors will see before you touch the upload button. Output size is configurable from 64×64 up to 1024×1024, with 512×512 as the safe sweet spot most platforms downscale from gracefully.

Why use Profile Photo

Circular and Square Crops

Most platforms display avatars in a circle even when they accept square uploads. Preview both crop shapes before downloading so you can confirm the circular version looks as good as the square — no surprises after upload.

Custom Border Colour and Width

Pick any hex colour and a border thickness from 0 to 20 pixels to match your brand or community aesthetic. Borders increase visual separation from platform backgrounds, making your avatar recognisable even at small thumbnail sizes.

Background Colour or Transparent

Replace cropped-out corner areas with any solid colour, or keep them transparent for PNG output. Transparent corners let your PFP layer cleanly on top of themed pages or dark-mode chat interfaces without a visible square background.

Custom Output Size

Pick any output size from 64×64 up to 1024×1024 pixels. Most platforms auto-downscale from your upload, so providing 512×512 gives them enough resolution to display sharp at 256×256, 128×128, and 48×48 simultaneously.

Pinch-Zoom and Drag to Reframe

Touch-friendly repositioning works identically on mobile and desktop. Pinch to zoom and drag to reposition so the most important part of the image — usually a face — sits centred in the crop area before you download.

100% In-Browser, No Upload

The Canvas API performs all cropping and compositing locally inside your browser tab. Your photo never leaves your device — no server upload, no third-party storage, no analytics on your image content.

How to use Profile Photo

  1. Upload a high-resolution photo or logo (at least 512×512 for best results)
  2. Drag to reposition and use the pinch or scroll wheel to zoom inside the crop preview
  3. Choose crop shape: circle or square
  4. Set border colour using the hex picker and choose thickness in pixels (0 for no border)
  5. Set the background to a solid colour or transparent (PNG output only)
  6. Choose output size (256×256, 512×512, or 1024×1024) and click Download

When to use Profile Photo

  • When creating or refreshing a forum avatar that needs a consistent circular crop at a specific pixel size
  • When setting up a Slack or Teams workspace avatar that appears next to every message you send
  • When building a personal website or portfolio and you need a polished headshot at a specific pixel size
  • When updating a dating app or social network profile and the in-app crop tool gives poor results
  • When creating brand presence on a community platform and you want a logo with a consistent border treatment
  • When any platform rejects your photo for being too large and you need to resize it to an exact square dimension

Examples

Selfie to forum avatar

Input: iPhone selfie: 4032×3024 JPEG, 4 MB

Output: 512×512 PNG circular crop, 3px white border, transparent corners — 75 KB

Brand circle for Slack

Input: Logo PNG: 2000×2000, 800 KB

Output: 256×256 PNG circle, 2px brand-colour border, white background — 18 KB

Headshot for personal site

Input: Studio shot JPEG: 3000×4000, 6 MB

Output: 800×800 JPEG square crop, 6px black border, quality 90 — 95 KB

Tips

  • Upload a source image at least 1080×1080 — most platforms display PFPs at multiple sizes simultaneously (32px thumbnail, 400px on profile page), and downscaling always looks better than upscaling.
  • PNG with transparency is best for platforms that mask into a circle — a JPEG background shows as a square behind the circle on any surface that isn't the same colour.
  • Keep borders to 4 pixels or less on small avatars — anything thicker and the actual face shrinks too much at 48×48 chat thumbnail size.
  • Position your face slightly above the mathematical centre of the circle — visual weight balances better when the eyes sit just above centre.
  • Test the result at 32×32 in your browser zoom — if you can still recognise the face there, it will look good in every chat thumbnail context.

Frequently Asked Questions

What size should my profile picture be?
512×512 pixels is the safe universal choice — large enough that platforms displaying at 256×256 or 128×128 have plenty of resolution to downscale from cleanly, but not so large that it hits upload limits. If a specific platform specifies a size (LinkedIn 400×400, Discord 256×256), match that exactly.
Should I export as PNG or JPEG?
PNG is generally better for profile pictures because it supports transparent backgrounds for circular crops and uses lossless compression — the circle edge stays crisp without JPEG artefacts. Use JPEG only when a platform requires it or you need a smaller file size.
Will a circular crop work on platforms that show squares?
A circular PNG has transparent corners, so on a platform that shows a square avatar against a white background, the transparent areas become white — effectively showing a circle inside a square. On platforms that show circles, the crop is already perfect. The live preview shows both.
Can I keep a transparent background?
Yes — choose PNG output and the areas outside the crop circle remain transparent. The background colour picker only applies when you explicitly choose a solid colour. JPEG output does not support transparency.
Why does my photo look pixelated after upload to Discord or Slack?
These platforms display avatars at multiple sizes from 32×32 to 256×256 depending on context. If your source photo was smaller than the output size you chose, upscaling made it blurry. Always start with a source image at least as large as your target output size.
How thick should the border be?
On small avatars (under 64×64 in chat lists) keep borders at 2–3 pixels. Thicker borders shrink the visible face area disproportionately at thumbnail sizes. For larger display sizes, 4–6 pixels adds visual separation without dominating.
Are my selfies uploaded somewhere?
No. All processing happens inside your browser using the HTML5 Canvas API. The image is never transmitted to any server. It stays entirely on your device until you click Download.
What's the minimum source resolution I need?
Use a source that is at least as large as your intended output. For a 512×512 output, provide a source of at least 512×512 — ideally 1080×1080 or larger so you have room to reframe before cropping.

Explore the category

Glossary

Profile picture (PFP)
The avatar image displayed next to a user's name on social platforms, forums, and messaging apps. Typically displayed in a circular or square crop at sizes ranging from 32×32 to 512×512 pixels depending on context.
Avatar
A small image representing a user in a digital space, derived from the Sanskrit word for divine incarnation. In UI contexts, avatars appear in headers, sidebars, chat lists, and comment threads.
Aspect crop
The process of cutting an image to a specific aspect ratio — such as 1:1 for a square — while retaining as much of the original content as possible through reframing rather than squishing.
Anti-aliased edge
A technique that blends pixels along a curved or diagonal boundary — such as the edge of a circular crop — between the image and the background, creating a smooth appearance instead of a jagged staircase.
Alpha channel
A per-pixel transparency value included in PNG files. A value of 0 means fully transparent, 255 means fully opaque. Circular crops use the alpha channel to make corners transparent so the circle shape is preserved against any background.
Display vs upload size
The distinction between the size an image is shown at on screen and the size recommended for uploading. Upload at the highest recommended resolution and let the platform downscale — uploading at display size causes blurriness at larger display contexts.