Logo

MonoCalc

/

Twitter Header Safe Zone Guide

Social Media
These figures are a dated snapshot

X can change how it crops a profile header at any time, without notice and without a changelog, so every region below carries the page it was read from and the day it was read. Open the source, and look at a real profile, before you commit artwork to it.

This dataset was last reviewed on 2026-09-21.

No header frame ships with this tool right now. A crop rectangle is included only if someone read it on X’s own help, developer or brand-resource documentation and recorded that page — none of those pages could be reached when this was built, and geometry measured off a screenshot is exactly what the rule exists to keep out. Add a region below from a page you have open, and the overlay, the intersection and the export all work from it.

Add a region from a page you have open

One submission adds one region. Name the same platform and frame again to add another region to it. A region needs an https:// address and the date you read it — the same rule a shipped region has to meet, because a rectangle nobody can check is the thing this tool exists to avoid. Your regions stay in this browser only.

About This Tool

Twitter Header Safe Zone Guide — one upload, several crops

An X (Twitter) profile header is uploaded as a single image and then shown as several different ones. The desktop profile, the mobile web profile and the native apps each take a different slice of the frame at a different aspect ratio, the profile avatar is composited over the lower left of it, and interface chrome sits over parts of it as well. That is why a header that looks balanced in an editor so often arrives with a wordmark cut in half on a phone: the editor showed you the whole rectangle, and no surface ever displays the whole rectangle. This header safe zone guide draws each crop over one frame and shows what they have in common.

The safe area is an intersection, not a box you can look up

Because each surface crops differently, there is no single safe zone to memorise. The area that appears intact everywhere is the geometric intersection of every crop — the region inside all of them at once — and it is always smaller than any individual crop. Content placed low and to the left may clear the desktop crop and still be swallowed by the avatar in the app; content placed near the top may survive in the app and be cut away on desktop. Only the overlap answers both questions at the same time.

Turning a crop off recomputes that intersection immediately, which is the point of the tool rather than a convenience. Isolating a single surface answers what does the phone app actually show?, and switching the others back on shows what it costs to clear them too. When the enabled crops do not overlap at all, the tool says there is no common area rather than drawing a box with a negative width.

Crops shrink the safe area; obstructions cover it

The two kinds of region on the canvas do different things, and the distinction is worth keeping straight. A crop is a viewport’s visible slice, so it takes part in the intersection. An obstruction — the avatar disc, a back arrow, an overflow menu — is drawn over the header on a surface that still shows the rest of it, so it never shrinks the intersection. It is painted as a hatched exclusion on top instead. Treating the avatar as a crop would quietly shrink the reported safe box everywhere, including on surfaces that do not draw an avatar at all.

Fractions of the frame, never pixels

Every region here is stored as a fraction of the uploaded frame, with the origin at the top left. A header renders at whatever width the viewport happens to be, so a crop measured as 600 px on one display is a different number of pixels on every other one, and a stored pixel figure is right on exactly one device. Fractions survive that rescale, and they survive X restating its nominal upload size. The tool converts to pixels only at the moment it draws or reports, which is why the readout gives the safe box both as an x, y, width, height rectangle at the frame’s stated reference resolution and as percentages for tools that work proportionally.

These figures are a dated snapshot, not a standard
X changes its layout without notice and without a changelog. Every region drawn here carries the page its geometry was read from and the day it was read, and the tool ships with no regions at all rather than with rectangles nobody could verify. Check a real profile before committing artwork to any of it.

Your image stays on your device

Loading a header image is optional — the geometry lesson works on the placeholder frame with nothing loaded. If you do load one, it is decoded by your browser, drawn onto a canvas on this page and encoded back into a file your browser saves locally. There is no server to upload to and no field for an image address, because a remote image would taint the canvas and break the export outright. Files are checked against both a size cap and a megapixel cap, since a small compressed file can still decode to an enormous bitmap, and a rotated phone photo is turned upright from its orientation tag before anything is drawn.

A header that is not the frame’s aspect ratio is not rejected. It is fitted to the frame and the empty bars are marked, because seeing how much of the frame a 16:9 source cannot fill is usually more useful than being told to resize it.

Frequently Asked Questions

Is the Twitter Header Safe Zone Guide free?

Yes, Twitter Header Safe Zone Guide is totally free :)

Can I use the Twitter Header Safe Zone Guide offline?

Yes, you can install the webapp as PWA.

Is it safe to use Twitter Header Safe Zone Guide?

Yes, any data related to Twitter Header Safe Zone Guide only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

Why is there no single safe zone for an X (Twitter) header?

Because the header is uploaded once and then shown several different ways. The desktop profile, the mobile web profile and the phone apps each take a different slice of the image at a different aspect ratio, so a logo that sits comfortably inside one of those slices can fall outside another. The area that survives everywhere is the geometric intersection of every crop — what all of them have in common — and that box is always smaller than any single crop on its own.

How does this tool work?

You pick the crop rectangles you want to clear, and the tool intersects them and draws the result over a header frame. Every crop is stored as a fraction of the uploaded frame rather than as pixels, so the overlay is correct at any canvas size. Turning a crop off recomputes the intersection immediately, which is how you answer questions like what the phone app alone shows. Loading your own header image is optional — the geometry is drawn on a placeholder frame without one.

Why does the avatar matter when it is a separate image?

The avatar is composited over the header rather than placed beside it, so the pixels underneath it are covered on every surface that draws it. It is treated here as an obstruction, not as a crop: it does not shrink the intersection, because the rest of that surface still shows the header, but anything placed under the disc is hidden. The overlay draws it hatched over the safe box so you can see exactly which part of your artwork it lands on.

Why does every region carry a date and a source link?

Because crop geometry is a fact about somebody else's product, and X can change its layout without notice and without a changelog. A stale crop rectangle is worse than none at all: it tells you your wordmark is clear when it is about to be cut off. So a region exists here only if someone opened X's own documentation, read the geometry there, and recorded the page and the day they read it. Treat everything on screen as a dated snapshot and confirm it on a real profile before you commit artwork to it.

Why does the tool ship with no crop regions in it?

Because none could be read at their source when it was built — every X documentation host was unreachable from the build environment, so no figure could be verified. Under the sourcing rule that means nothing ships, rather than rectangles written from memory or measured off a screenshot. The geometry engine is complete and works entirely from figures you enter: add a region from a page you have open, with its address and the date, and the overlay, the intersection and the export all work from it.

Is my header image uploaded anywhere?

No. The file you choose is decoded by your own browser, drawn onto a canvas on this page, and encoded back into a file your browser saves locally. This site is a set of static files with no server to upload to, no account and no image endpoint, and the page makes no network request while you work. You can disconnect from the network entirely and every part of the tool still works. There is deliberately no field for an image address either, because loading a remote image would taint the canvas and break the export.