Twitter announced today the addition of a header image, like Facebook’s Timeline image, to its users’ profiles. Much like Facebook’s Timeline image, a Twitter user’s profile image remains a separate element and is set over the header image.
BTI’s Facebook Timeline image
BTI’s Twitter Header image
Unlike Facebook, however, your Twitter profile image is centered entirely within the header and leaves nothing hanging past.
With this new development will most definitely be some fun, interesting, and downright strange custom Twitter profiles – much like Facebook’s Timeline. If you would like to plan out your Twitter header and profile images, BTI can help.
A quick guide to Twitter’s header image dimensions
Twitter allows a maximum dimension of 1252px by 626px and maximum size of 5MB for your header image. When displayed on the page, it will be resized to 520px by 260px. Your profile image will be 82px by 82px, horizontally centered (219px from each side), and vertically inset by 20px from the top. NOTE: The header / profile image spacing will appear differently on a mobile device.
When it comes to creating your own header image, we recommend starting with a canvas of 1252px by 626px (why not make use of the maximum allowable?) at 72ppi and set in an RGB colour space.
Pick your image subject carefully, as Twitter will set your title, handle, short bio, and website over top of your header image in white text. Twitter does, however, apply a transparent to semi-black gradient over your image so that the white text stands above a darkened bottom half.
A side-by-side of the original header and the same image as displayed by Twitter
Pro Tip: You may want to consider adding a gradient blur to the bottom half if the image content is detailed, busy, or contains text that may conflict with your bio information, as placed by Twitter.
When you are ready to upload your custom header, head to the ‘Edit Your Profile’ section, as you would to change your profile image or other settings. Once there, navigate to the ‘Design’ section (found on the left navigation column), where you would normally edit the background image and colour theme for your profile page. Below the premade themes, you will see the ‘Customize your own’ section.
Twitter’s Design page
The first thumbnail will be your ‘Header’ image. Use the ‘Change header’ button to upload a new image. Once selected, Twitter also allows you to crop the image (if you started with dimensions larger than the 520px by 260px final display size). Click ‘Save’ when finished cropping. Before leaving the Design page,don’t forget to click the ‘Save Changes’ button at the very bottom so that Twitter will update the change.
The ‘Save changes’ button is a different step from the ‘Save’ button in the image uploader
And, there you have it. Your brand new, fully custom Twitter header image!