VisionHow do I check how my Twitter banner will be cropped?
To check your Twitter banner crop, upload your header to the free Twitter Banner Crop Preview. It shows the image at X's recommended 1500 x 500 size with guides for your profile photo circle and the roughly 60 pixel bands that X says can be trimmed from the top and bottom.
Here's the problem it solves. You design a header, upload it, and your logo ends up hidden behind your own profile photo. Or a line of text gets sliced off on a friend's laptop. A two-minute check before you post saves that redo.
How to use the Twitter Banner Crop Preview
- Drop your header image on the box, or click it to choose a file.
- Read the note under the guides. It tells you if the image is not 3:1, is smaller than 1500 x 500, or is a GIF.
- If your image is not 3:1, drag the crop position slider until the part you want is in the frame.
- Switch guides on and off: crop bands, desktop photo, phone photo and a thirds grid.
- Look at the phone width preview, then tick the 60px option to see the tightest crop.
- Download a clean 1500 x 500 JPEG or PNG to upload, or a copy with the guides to send to a designer.
What do the guides mean?
The red bands mark the top and bottom 60 pixels, which X's help page says a header can lose depending on the screen and browser. The circles show roughly where your profile photo sits over the header on desktop and at phone width. Keep faces, logos and text out of both.
| Guide | What it shows | Where it comes from |
|---|---|---|
| Frame | 1500 x 500 pixels, a 3:1 shape | X Help Center recommendation |
| Red bands | About 60px top and bottom that may be trimmed | X Help Center upload tips |
| Desktop circle | Profile photo spot in a 600px profile column | Approximate, based on X's web layout |
| Phone circle | Profile photo spot at 390px phone width | Approximate, based on X's web layout |
The size comes from X's page on how to customize your profile. The 60 pixel note is on its page about profile and header upload issues. The photo circles are estimates based on X's current web layout, not an official X spec, so treat them as a safe zone, not an exact line.
Why does my header look different on phone and desktop?
Your header looks different because each screen shows the same 3:1 image at a different width, and the profile photo covers a different share of it. Some screens also trim the top and bottom. The photo always sits on the lower left.
On a wide desktop column, the photo covers a small corner. On a narrow phone, the same corner looks bigger compared with the screen. That's why the phone preview matters. Text that feels roomy on a monitor can feel cramped next to the photo at 390 pixels.
Tips for a header that survives every crop
- Design at exactly 1500 x 500 so nothing is cut on the sides.
- Keep key text in the middle band, between the red guides.
- Push words and logos toward the center or right. The lower left belongs to your photo.
- Use big, simple shapes. Fine print turns to mush on a phone.
- Save as JPG or PNG. X's help page says animated GIFs are not allowed for headers.
Here's a quick example. Priya, a fictional UX designer, puts "I design calm apps" on the left of her header. The preview shows the desktop circle covering "I des". She moves the line to the right third, checks the phone view, and downloads a clean JPEG.
Common mistakes to avoid
- Using a 16:9 photo. A big slice of the height gets cut to reach 3:1.
- Placing a logo in the bottom left corner, right behind the profile photo.
- Running text to the very top or bottom edge, inside the trim zone.
- Uploading a small image. Anything under 1500 x 500 gets stretched and looks soft.
Which related tool should I use next?
Need a header from scratch? The Twitter Header Maker builds one at the right size. To change the shape of any image, use the Twitter Image Resizer. For the round photo on top, try the Twitter Profile Picture Resizer, then see the whole page in the Twitter Profile Preview.
For ideas and a full checklist, read header ideas for businesses, how to make your X profile stand out and the profile optimization checklist.
Frequently Asked Questions
What size should a Twitter header be?
A Twitter header should be 1500 x 500 pixels, which is X's recommended size as of October 2026. That is a 3:1 shape, three times wider than it is tall. X accepts JPG, GIF or PNG for headers but not animated GIFs. The Twitter Banner Crop Preview warns you when an image is not 3:1.
Why is my Twitter header cut off?
A Twitter header gets cut off when the image is not 3:1, because X trims it to fill the frame. X's help page also says a header can lose about 60 pixels at the top and bottom, depending on the screen and browser. Keep important content away from those edges.
Where does my profile photo cover the header?
Your profile photo covers the lower left corner of the header and hangs over its bottom edge, on both desktop and phone. The circles in the Twitter Banner Crop Preview are estimates based on X's current web layout. X can change the exact position, so leave a generous margin around them.
Can I use an animated GIF as my Twitter header?
No, X's help page says animated GIFs are not supported for the profile photo or the header, as of October 2026. You can upload a JPG, PNG or still GIF. If you drop a GIF into the Twitter Banner Crop Preview, it uses the first frame and reminds you to save a JPG or PNG.
Does the banner preview upload my image?
No, the Twitter Banner Crop Preview never uploads your header. The image is drawn on a canvas inside your browser, the guides are painted on top, and both downloads are created on your own device. Nothing is stored, so you can check unreleased designs or client work safely.