Facebook Timeline Banner Dimensions Version 2

15 Comments

Since our last blog post for the Facebook Timeline Banner was so popular, we’re providing an update because the avatar photo size has changed slightly. We also had some doubters as to the appropriate asset size so we’ve provided a short write up as to how we arrived at the dimensions that Facebook has set.

What has changed since the last Facebook banner?

The only change is the avatar, it has gone up in size so the PSD has been updated.

 

What are the dimension of the banner?

In short 851 x 315 pixels.

How did we calculate that you ask? With both a combination of screen capture, laying out the grid in Photoshop and also cross referencing Facebooks CSS from the div they title “coverImage”.

From looking at the CSS they assign the width as 851 pixels, easy enough. There is a 1 pixel stroke around that’s black and set to 30% opacity. The height is set to 315 pixels but they also set a -1px vertical position making it 814 pixels (visible).

 

How about the avatar?

Since the avatar is custom and easy to crop, this part doesn’t matter as much. I would recommend keeping your avatar to a square shape and probably a simple version of your logo (if you’re setting up a business page).

Download the PSD

Comments

  1. Didier Clement    October 4th, 2012 at 02:44pm

    Sweet, and very helpful. Cheers, friends.

  2. Kate G    October 6th, 2012 at 12:19pm

    Thanks you for doing the heavy lifting on this. You’ve made my life easier. Cheers!

  3. Gie    October 8th, 2012 at 02:50pm

    thank you so much for this :)

  4. Blue    October 17th, 2012 at 01:35pm

    The Avatar Pixel needs to be 180W x 179H

  5. balow    October 19th, 2012 at 11:56pm

    says in PS that some fonts are missing… what are those fonts required for edit?

  6. Leigh    October 20th, 2012 at 11:20am

    The fonts are there just for placeholder and should be deleted for your image. As for the avatar the image will resize to 160 width or height depending on which is greater (landscape versus portrait). Once resized a 10 pixel padding is added within a container class called “uiScaledImageContainer profilePic”.

    So the actual final dimension of the avatar is 160×160 pixels visible.

  7. Jerome    November 26th, 2012 at 09:14am

    Thanks, everytime I need to update my timeline cover, I have to go searching for the dims, now I have the PSD!! ~ XLNT!!!

  8. Kristher    January 4th, 2013 at 08:48am

    Thank you, Just the way I like it.

  9. Lena_J    February 28th, 2013 at 07:27am

    Thank you so mutch for sharing. Now i will try to make my own banner :-)

  10. Frank Hedrich    March 1st, 2013 at 04:22am

    Danke für die Info.

    lg frank

  11. Jenny James    March 9th, 2013 at 08:01am

    What a useful share. I love anything that makes my job easier – and this ticks all the boxes. Thanks guys!

  12. Wesley Blokker    March 19th, 2013 at 04:05am

    Thank you for this very helpful design!

  13. Maria    April 15th, 2013 at 07:30pm

    I tried the second version (as of April 15, 2013) and the layout was off (the profile pic box was not aligned right). Do you have a 3rd version? Seems like Facebook changes things quite often.

  14. Wied    April 19th, 2013 at 02:07am

    Hei, many thanks!
    This is really helpful for lazy chap like me. :-)

  15. Amanda    May 13th, 2013 at 01:51pm

    Thank you so much!