Responsive Twitter Header Size and Template [2016]

by admin

Sep 20, 2016

guild

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 2016 Twitter header template!

2016 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 2016, the 1500 x 500 image shows in full on my iPhone.

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.

2016 Twitter header size template. Right Click the image to grab the full-size template.

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.

2016 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.