Want to make the most of your BIG Twitter header size?
The large, responsive Twitter header (cover photo) rolled out in Spring 2014, along with a larger profile picture, plus more changes.
The news is all about LARGE images these days! And responsive images – which can be a challenge to design.
I originally wrote this post in April 2014, after the new look debuted.
Twitter has come a long way in standardizing the header display across various devices (YAY!), so I rewrote in September 2016. Take a look, and download the current 2016-17 Twitter header template!
2017 Twitter Header / Cover Photo Size
The full width of your Twitter header will be seen at a minimum browser width of approximately 1040 pixels (as pictured below). The header will enlarge as the window enlarges – to 5 inches high at full width of a 21″ monitor. That’s BIG!
The header size to create is 1500 x 500 pixels, though it will get cropped top and bottom on desktop. The exact cropping will vary depending on the viewer’s browser width, but plan on 40 to 60 pixels each top and bottom.
DON’T create the header at a reduced height though! NOW, in 2017, the 1500 x 500 image shows in full on my iPhone.
If you don’t want to mess around figuring out the proper dimensions, Snappa‘s easy graphic design tool has all of the dimensions and safe zones built right in. You can try it for free here. If you “go Pro,” I’ll receive a commission.
On desktop, the header size changes dynamically as the browser window is enlarged or reduced, and the top / bottom cropping varies slightly as it changes. See 3 browser widths compared below. I added grid lines every 50 pixels so you could see the cropping change. I also reduced the headers in proportion to each other. Pin this for reference!
This comparison chart also shows that you can’t pinpoint where the profile picture will overlap the header, as it will vary depending on the user’s browser window width.
I created a Twitter header template for you, showing the possible cropping and overlap on desktop. Keep those shaded areas clear of type and important details!
Right click the image below to save to your hard drive.
How to Save and Upload Your Twitter Banner
After designing your Twitter cover photo in Photoshop, PicMonkey, or Canva, I suggest you save as a PNG file for top quality. Twitter will compress your image, leaving unsightly compression artifacts – so start with the highest quality image you can.
To upload your new Twitter header, click the Edit Profile button that appears at the far right of your profile picture when you’re logged in.
If you upload a smaller header photo, there’s a slider to enlarge it, and you can adjust the cropping by clicking on your image and dragging.
I strongly recommend uploading at least 1500 pixel width for best image quality. Wider images will automatically be reduced to fit the width, but you can scale them up with the slider if desired.
Once you’re pleased with the size and position, click the blue Apply button. You’ll be returned to Edit mode, as shown below. There, click Save Changes, OR while in Edit mode:
- add a new profile picture
- adjust theme colors to match your brand
- edit your bio, location, and website
Your “join date” will appear under this text on the left of your profile page, and can’t be edited.
Below that are your 6 latest photo and/or video thumbnails.
2017 Twitter Profile Picture Size
Your Twitter profile picture size has increased as well. Twitter suggests uploading 400 pixels square. You can’t go wrong with bigger, for better photo clarity.
Larger Tweets and Pinned Tweets
The font size for tweets was enlarged in Spring 2014, and tweets that are getting more engagement are larger yet! Note the difference in font sizes seen below.
Pinning a tweet, like a pinned post on a Facebook Page, is a nice added feature. Simply click on the elipsis (…) under the tweet and choose Pin to your profile page.
Now it will stay at the top of the tweet stream on your profile page. Pin a tweet with a valuable call-to-action for new visitors to your page!
No More Twitter Backgrounds in 2017
After the 2014 redesign, you could see your former background image on your Home feed (shown below), Notifications, and Discover page.
This has been discontinued. Now all backgrounds are the same pale gray as your profile page (see top image). They can’t be edited.
What If I Don’t Create a Twitter Header?
If you don’t upload a header image, you’ll see a solid bar of the default theme color, like so:
My recommendation: create a new Twitter cover photo each time you have a new promotion.
Need ideas? Read: 7 Ways to Power Increased Interaction with Twitter Banners
Seen my latest tweets? You should check it out and follow me here!
Are You Ready to Create a Twitter Header?
Confused yet? If you don’t want to fool around trying to figure out the proper dimensions, Snappa‘s easy graphic design tool has the sizes and safe zones built right in. Making your design work – a snap!
You can try it for free here, to quickly make your large and lovely responsive Twitter header.
Share a link to your Twitter profile in your comment below!