Most header problems aren’t about the file size. The image is the right size, it looks fine on a laptop, and then on a phone the first word of the headline is gone and the profile photo sits on top of the logo. That happens because X shows the same file in boxes with different shapes.
This guide gives the size X asks for, shows how X actually crops the header on desktop and on phones (we measured it), and marks out the area where text is safe. Then it walks through making a text header that already follows those rules with our free Twitter banner maker, and uploading it.
Twitter header size in 2026
X’s help center recommends a header image of 1500 × 500 pixels, which is a 3:1 ratio. It accepts JPG, PNG and GIF files, though animated GIFs aren’t supported for headers.
| Spec | Value |
|---|---|
| Recommended size | 1500 × 500 px |
| Aspect ratio | 3:1 |
| File types | JPG, PNG or static GIF |
| Shown on desktop web | 598 × 200 px (the whole image) |
| Shown on phone web | Screen width × 200 px (sides cropped) |
Bigger files don’t look sharper on X. On desktop the header is drawn about 598 pixels wide, so even a high-density screen only needs around 1,200 pixels across, which 1500 × 500 already covers.
X’s help pages give a 2 MB limit for profile photos but are less clear about headers. Staying under 2 MB is the safe choice, which for a text header usually means a 1x or 2x PNG, or a JPG for photos.
How X crops the header on desktop and phones
We checked x.com in a browser on 7 October 2026 at widths from 360 to 1920 pixels. The header box was always 200 pixels tall. Its width changed: 598 pixels in the desktop layout, and the full screen width on phones. X fills that box with your image and centres it, cutting off whatever doesn’t fit.
What that means in pixels of your 1500 × 500 file:
- Desktop: 598 × 200 is almost exactly 3:1, so the whole image shows. Nothing meaningful is cropped.
- Phones: a 200 px tall box that’s only 360 to 430 px wide. At 375 px wide you see roughly x = 281 to x = 1219 of your image. At 360 px, x = 300 to 1200. About 300 pixels disappear from each side.
- Narrow windows and small tablets: at some widths between about 600 and 800 px the layout stretches the column beyond 3:1. At 700 px we saw the box at 698 × 200, which trims about 35 pixels from the top and bottom.
- The profile photo: on desktop the round avatar is 136 px across, starts 16 px from the left and hangs halfway into the header. In your file that covers roughly x = 40 to 380 from y = 330 down. On a 375 px phone the avatar is smaller but, because the sides are cut, it lands further in, around x = 320 to 535 from y = 390 down.
These numbers are from X’s website. The iPhone and Android apps use their own layouts, and X changes them without notice, so treat the figures as a guide and always check your real profile on a phone after uploading.
The safe area: where to put text and logos
Put those measurements on one image and the safe area is easy to see.
Rules that follow from it:
- Keep text between x = 300 and x = 1200. Anything in the outer 300 pixels may be cut on phones. Background colour or texture can run edge to edge.
- Leave a 40 px margin top and bottom. It covers the tablet trim and keeps text from feeling cramped.
- Keep the lower left clear. Below about y = 330 and left of about x = 540, the avatar covers part of the image on one device or another.
- Centre or right-weight the message. The safest single spot for a headline is the middle of the image, slightly above centre.
- Make text big enough. On a phone the whole header is about 200 px tall, so a 40 px headline in your 1500 × 500 file shows up around 16 px high. Anything smaller than that becomes hard to read.
What the banner maker lets you change
The Twitter header maker builds a text header on a dark gradient with a coloured glow. Its layout follows the measurements above: the label, headline and supporting line are centred between x = 300 and x = 1200 and kept above y = 330, so phones don’t cut them and neither avatar position covers them. It runs in your browser and nothing is uploaded.
| Part | What you can change | Limit |
|---|---|---|
| Headline | Large white text, centred, the line people read | 80 characters |
| Supporting line | Smaller grey text under the headline | 140 characters |
| Footer | One line at the bottom centre, such as a handle or URL. Longer text is cut off with an ellipsis | 40 characters |
| Accent color | Any colour, used for the glow and the small label | One colour |
| Safe-area guides | Show or hide the crop and avatar overlay in the preview | On by default |
| Export size | 1x PNG (1500 × 500), 2x (3000 × 1000) or 4x (6000 × 2000) | One size per download |
The background, fonts and positions are fixed, and a small “Xholic AI” label sits above the headline. There’s no photo upload. If you want a photo header, build it in a design app and use the safe-area measurements above.
How to make a Twitter header, step by step
Here is the full workspace. The numbers match the steps.
Step 1: Write the headline
Type the one line you want profile visitors to remember into Headline (1). It’s capped at 80 characters, but shorter works better: five to eight words stay on one or two lines. Say what you do or who you help, not your name, because your name already sits right under the header.
Step 2: Add the supporting line
Supporting line (2) takes up to 140 characters. Use it for proof or detail: what you post about, a product name, or how often a newsletter goes out. It’s printed much smaller than the headline, so on a phone, where the whole header is about 200 px tall, it’s the first thing to become hard to read. Keep it to one short sentence.
Step 3: Set the footer
Footer (3) is a single line at the bottom centre, up to 40 characters. A handle or domain fits well. The default is “@xholicai”, so replace it or clear it. If the text is too wide for its slot, the end is cut off with “…”, so keep it short.
Step 4: Pick an accent colour
Accent color (4) opens your system colour picker. It colours the glow in the top right and the small label above the headline. Match it to your avatar or brand colour so the header and profile photo read as one design.
Step 5: Check the safe area
The preview (5) updates as you type and shows the same 1500 × 500 layout you’ll download. Show safe area is ticked by default and draws the measurements from this guide on top:
- Hatched strips on the outer 300 px of each side are cut off on phones.
- The blue circle is where your profile photo sits on desktop, and the yellow circle where it sits on a phone.
- The dashed green box is the area to keep text inside.
The headline and supporting line always stay inside the box. Use the overlay to judge length: if a long headline wraps to three lines, the text block gets tall and the supporting line gets crowded. Untick the box to see the clean design. The guides are never part of the download.
Step 6: Choose the export size
Export size (6) defaults to 2x. Pick 1x (1500 × 500) for the exact recommended size and the smallest file. 2x (3000 × 1000) is fine too. Skip 4x (6000 × 2000) for X: our 4x test file was 5.7 MB, far more than X needs and likely over its upload limit. 1x came out at about 0.5 MB and 2x at about 1.8 MB.
Step 7: Download the PNG
Press Download PNG (7). The status line shows “Preparing PNG…” and then “Banner downloaded at 1x.” (or whichever size you chose). The file is named after the scale, for example xholic-twitter-banner-1x.png. It matches the preview exactly, without the guides, whatever the size of your screen.
Uploading the header to X
- Open your profile on X and choose Edit profile.
- Tap or click the camera icon on the header area and pick your PNG.
- X shows a crop frame. A 1500 × 500 file already fills it, so you can apply it without zooming.
- Save, then open your profile on a phone and check that the headline isn’t cut and the avatar isn’t covering anything important.
Button labels differ slightly between the apps and the website, but the flow is the same. Update the header and your bio together so they say the same thing. Our Twitter bio generator guide covers the bio half.
Writing a header that’s worth the space
Visitors look at the header before they read your bio, so give it one message: what you do or what they’ll get. “Weekly breakdowns of SaaS pricing pages” beats “Product marketer”. Match it to your pinned post, and change it when your focus changes, because an outdated header is worse than a plain one. To check the header, bio, avatar and pinned post together, run your account through the X profile audit.
Troubleshooting
The headline is cut off on my phone. Part of it sits in the outer 300 px on one side. The banner maker keeps its text inside x = 300 to 1200, so if you used it, check that X saved the new file and compare with x.com in a phone browser, since the apps can crop slightly differently. If you built the header elsewhere, move the text inside that band.
The avatar covers part of my text. The text is in the lower-left corner. Move it up or to the right of about x = 540. The banner maker keeps its text above that area.
The header looks blurry. The source was smaller than 1500 × 500 and X stretched it, or a photo was saved as a heavily compressed JPG. Export at 1500 × 500 or larger. PNG keeps text edges sharp.
X won’t accept the file. Check the format (JPG, PNG or static GIF) and the size. A 4x PNG from the maker is several megabytes, so download the 1x or 2x version instead.
The text looks crowded. A long headline wraps to three lines and pushes the supporting line down. Cut the headline to a few words or shorten the supporting line until the block sits comfortably inside the dashed box.
“Couldn’t export the banner in this browser. Try another browser.” The browser couldn’t turn the preview into a PNG. Reload the page and try again, or switch to an up-to-date Chrome, Edge, Firefox or Safari.
Frequently asked questions
What size is a Twitter header in 2026?
1500 × 500 pixels, a 3:1 ratio. X recommends that size, and it’s enough for sharp display on high-density screens because desktop shows the header about 598 pixels wide.
Is the Twitter banner size the same on mobile?
The file is the same, but phones show less of it. On x.com the header box stays 200 px tall and only as wide as the screen, so roughly 300 pixels are cut from each side of a 1500 × 500 image. The apps may differ slightly, so check your profile on a phone.
What is the Twitter header safe area?
The part of a 1500 × 500 header that stays visible everywhere. By our measurements, keep text between x = 300 and x = 1200, at least 40 pixels from the top and bottom, and away from the lower-left corner where the profile photo sits.
Where does the profile picture overlap the header?
In the lower left. On desktop the avatar covers about x = 40 to 380 from y = 330 down in your file. On a 375 px phone it covers about x = 320 to 535 from y = 390 down.
Can I upload a 3000 × 1000 header?
Yes. It has the same 3:1 ratio, and X scales it down. It won’t look noticeably sharper than 1500 × 500, so use it only if the file stays small.
Is the Twitter banner maker free?
Yes. It runs in your browser with no signup, and your text isn’t uploaded anywhere. The design includes a small “Xholic AI” label above the headline.
Does the banner maker show the safe area?
Yes. The Show safe area option, on by default, overlays the phone crop strips, both avatar positions and a dashed box for text on the preview. It never appears in the downloaded PNG.
Related guides and tools
- Twitter profile picture size: the avatar that sits on top of your header.
- X profile audit guide: check the header, bio and pinned post together.
- Twitter bio generator guide: write a bio that matches the header.
- Twitter font generator guide: styled text for your display name and bio.
- Twitter profile optimization: the rest of the profile, step by step.
