Customize Facebook’s Cover Picture – Dimensions & Template

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on Reddit

With the release of Facebook’s timeline profile layout, they’ve have inserted an area known as the Facebook Cover Photo at the top. The profile picture is now a smaller thumbnail version that rests in the lower left of the cover picture. Facebook’s cover picture allows individuals to express themselves with a much larger space.

Most people will just add another picture as the cover photo. However, us creative’s are always looking for a unique way to express ourselves. Customizing Facebook’s cover picture is another way to do that. Below are the dimensions of the cover picture layout.

Dimensions for Facebook’s Cover Picture

Cover Picture area
Width: 851px
Height: 315px
(*note: There is a 1px border around the outside but that will not affect the size of the final image)

Profile Picture Thumbnail
For those of you that are designers and know CSS, the profile picture is positioned absolute. Not that it’s uber important, but just saying. It sits 23px from the left and 127px up in the cover picture. (or 193px down)

Width: 125px Now is 160px
Height: 125px Now is 160px
Border: 4px white (#ffffff)
Border-radius: 2px
Padding: 1px all around

There is a div that sits behind the picture and it’s border that has a background that is black with an alpha channel of 0.3. Essentially, it’s opacity is set at 30%. Although the whole background is filled behind the image, it only appears to the user as a gray 1px border. The complete size of the profile picture thumbnail, with the borders and ‘background’ is 170 x 170.

Facebook Cover Picture Template

To customize the Facebook cover picture, I have a Photoshop template that includes the profile picture thumbnail with it’s borders and also guides to help with the layout. It’s pretty easy to set up a template but to save you time, I’ve created one for you!

Updated 8-19-12

To accommodate the change with the profile picture dimensions, I have updated the template.

It’s free but you can pay me in love by adding me on G+ or Facebook.

To see what a few others have done already, check out this list of custom Facebook cover pictures.

I’d like to see what you’ve done already. Post a link below!

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInShare on Reddit

81 thoughts on “Customize Facebook’s Cover Picture – Dimensions & Template

  1. Brian says:

    Thanks for the template. Looks great 😉

  2. Dave says:

    Brian, you’re welcome. Glad I could help. Thanks for checking it out.

  3. Joe says:

    Facebook is too confusing. Wouldn’t be able to figure it out without some help.

    1. Dave Demuth says:

      That’s why I’m here, Joe.

  4. Maggie says:

    The template was great! I was already to start making a new doc in photoshop and it was all done for me! Fun playing around with all these new changes.

    1. Dave Demuth says:

      Thanks Maggie! Glad you were able to use it.

  5. Stomm says:

    I tried to upload a profile picture of 135×135 and facebook gives me an error saying it must be at least 80pixels wide.

  6. Stomm says:

    Sorry that’s *180

  7. Todd says:

    I appreciate the template you’ve provided- how do I use the template in Lightroom 3.6?

  8. steve says:

    Same as you Stomm. What was the resolution? Tried to upload a 135×135 profile pic, and I get an error saying it should be at least 180 pixels wide.

    1. Dave Demuth says:

      Steve and Stomm,
      Looks like Facebook has a known issue about images being less then 180 pixels wide.
      http://www.facebook.com/KnownIssues/posts/210518708959834

      However, you should be able to upload any profile picture with a width of 180 or greater, and then be able to crop the picture to get the correct thumbnail.

  9. Nice – I did mine without knowing the proper dimensions, painfully working through trial and error. But this makes life so much easier! Thanks for going through the trouble to map it out.

    I’m not much with Facebook, but the dimensions will help me build a few interesting covers for friends. Thanks again!

  10. mollyscraps says:

    Thanks for the template. Digital scrapbooking is my hobby so I wanted to make my own cover. You really simplified it!

  11. Cary says:

    So helpful! Thank you so so so very much!

  12. Tara says:

    The template worked perfectly. Thanks a bunch!

    1. Dave Demuth says:

      Most welcome! Glad I was able to help.

  13. Brian says:

    Is there a way to toggle the template to save the profile pic thumbnail separately? I have copied a picture as a new layer in the template and when I save as .jpg it creates the cover picture as expected. I would like to save again and create a new .jpg for the profile pic too, so that it captures the rest of the image as I have placed it. Does this make sense?

    Thanks!

    1. Dave Demuth says:

      Yes, you can create a slice for just the profile thumbnail pic and then use the save-for-web option, making sure you have the slice selected. However, you may be better off creating a separate image and uploading that separately for the profile pic. As noted in the above comments, Facebook make only except images as low as 185 x 185. They then offer the ‘thumbnail crop’ that displays the 125 x 125px as noted in the template.

  14. Graham says:

    Very cool of you to provide. Looking forward to creating my cover pic with the help of your template. Kudos sir!

  15. Mohammad says:

    Thanks Dave,, you are really creative.

  16. Michelle says:

    Thank you for the template. Just what I was looking for.

  17. Thanks so much! Perfect timing with this template!

  18. Pat says:

    Hey Dave, thanks for posting this tutorial on the cover photos. Not to mention the template too. That’ll be a huge help!

  19. Nikola says:

    Bravo 🙂 Thanks for the template!

  20. Dave says:

    Really appreciate the template, Dave… really helped. May you live to be a a thousand years old. =)

    *shared everywhere to spread the love!

    //D

  21. Kendra says:

    Thanks Dave! This definitely saves me some time! 🙂

  22. Will says:

    Hey Dave, thanks for the template! Very helpful. Nice write-up,too!

  23. Laura Zielke says:

    Thanks for the measurements!!! I was getting really tired of the trial & error method. You might want to change your image to reflect the 180×180 requirement for the personal photo part.

    1. Dave Demuth says:

      You’re welcome. Thanks for the feedback. I will add a note in there about Facebook’s 180×180 image requirement

  24. Rachael says:

    Thanks for the Facebook template – really appreciate it. I played around with it for half hour before I found your template and it works perfectly! Thanks again 🙂

  25. lacey says:

    wow, you rock! thanks!!

    1. Dave Demuth says:

      You rock! Thanks Lacey.

  26. Shannon Pearson says:

    Kicking ass in SEO I see! Haha. Came across your blog entry first brotha in a semi-related mundane topic search. 🙂

  27. Brenda says:

    Thanks!!!

  28. Michael says:

    Dave,

    I think Facebook just increased the size of the profile pic, do you know what is the dimension right now?

    Thank you.

    1. Dave Demuth says:

      Michael,
      Yes, they did. Great catch and thanks for letting me know! The new dimension of the profile picture is 160px x 160px. I’ve updated the article and template as well.

  29. Michael says:

    Dave, Thank you for your quick response. I’m downloading the template to fix my cover pic (that was ‘broken’ by this latest update from FB).

  30. Sam says:

    Could you please update all the dimensions, including how high the profile picture now cuts into the cover photo? Thanks.

  31. I love that Facebook started doing the cover photos. They look great on profiles and are a cool marketing space for pages as well.

  32. Nigel says:

    Super article – when I padded the top it came out great!

    http://www.facebook.com/theSunriseMarket

  33. Virgie says:

    thanks a lot!! very helpful 🙂 look what I did: http://www.facebook.com/cca9130

  34. Hatha says:

    Thanks for the info:) I have downloaded the template. Now what? Is there a video somewhere with more info? Thanks again:)

  35. Derek says:

    Dave I am building a fan page and have used photoshop to build it to the correct dimensions 851 pixels wide, 315 pixels tall and less than 100 kilobytes in size but when I upload it, its way too big…. If I just pull in any old photo it works fine but I dont want any old photo I want my banner I created. Any advice would be much appreciated !

  36. Derek says:

    Disregard prior message… your template solved the problem. Thank you !!

    1. Dave Demuth says:

      Nice, glad it worked!

  37. Dave I’m turning to you on a barely related topic.
    I set up a like icon on my website at http://www.lajollaguidebook.com 8 people have liked it but my page only shows 1 like !? http://www.facebook.com/LaJollaGuideBook did I Screw something up !? Appreciate your advice !

    1. Dave Demuth says:

      Derek,
      I tried sending an email but it didn’t go through… but I think this is what you’re looking for…
      http://developers.facebook.com/docs/reference/plugins/like-box/

  38. venes says:

    Nice, clean and simple. Big thanks.

  39. Starlia says:

    Hi Dave, I have paint shop and can’t upload the template to use. Is there a way I can change the properties so it will work with paintshop?

    1. Dave Demuth says:

      You will have to set up the dimensions described above in paintshop. I’m not a paintshop guy though 🙂

  40. AELise says:

    This was very helpful!

    Thank You so much for your hard work.

  41. teresa says:

    Dave, thanks for the template… it has helped me be more creative with fb and has also helped me add a new lesson to my own folder… very much appreciated.

    1. Dave Demuth says:

      Most welcome! Enjoy.

  42. Raceme says:

    You sir are amazing!! Thank you sooo much for the template.

    I think the position of the profile picture should be moved a little above of its current position. Or I’m doing something wrong lol.

    1. Dave Demuth says:

      Thanks! I’ll take a look. Facebook could have changed it slightly in the last few months.

      Anyone else encounter this?

      1. Clay Johanson says:

        Hi Dave,

        Yes, the template now appears to be off — I just DLed it and made a cover photo and the profile pic intruded into stuff it shouldn’t have.

        Thanks for your hard work on this!

      2. Philipp says:

        Yes, it changed!

      3. Philipp says:

        Hey Dave! The profile picture starts now at pixel line 195 from the top.

      4. Dave Demuth says:

        Thanks for this update!

  43. Allan Wyllie says:

    Thanks for this. I love playing about with my cover pic. I have also done one for my friends band,and they love it. Was needing to know how high,and how far in the profile pic thingie (lol) sits on the actual cover pic. Thanks for the info,now can happily design to my wee hearts content. Oh…I use Macromedia’s fireworks (pre Adobe) old school me.

  44. Jim Pence says:

    Thanks for the template, You made my day.

  45. ruthy thomas says:

    i wonder why to spend too much of time when http://www.jellycovers.com/ like sites are there to provide plenty of free facebook covers and they also do free designing for who wish 🙂
    but still a good article Dave

    1. Dave Demuth says:

      A lot of ‘us’ designers just like to do our own thing. 🙂

  46. Isya says:

    hi Dave, i build my own template. but thanks for the great article.

    u can see my fb cover design here http://www.facebook.com/ssrimc

    1. Dave Demuth says:

      Nice work using the thumbnail image!

  47. Stephen Nass says:

    My cover photo worked out great, thanks for putting the exact pixels between each area. I’m not an expert at graphic design and that saved a lot of guesswork.

    1. Dave Demuth says:

      You’re welcome Stephen. Glad it help and saved some time.

  48. Derek says:

    Thanks for the template!

    Helped me put up some topical stuff in a matter of minutes:
    http://www.facebook.com/derek.brovold

  49. Dave says:

    Thanks for the template, Stephen!

  50. VSSA says:

    Thanks for the template. Used it to create a cover and profile pic for the Vitiligo Society Facebook page. Regards. NR

  51. Jared says:

    When I sized my profile picture 160 x 160 px, I received an error message saying the picture must be at least 180 x 180 px. When I resized it, all was well. The cover dimensions where right on the money.

    1. Dave Demuth says:

      Thanks Jared. I will update and try to keep up with Facebook and their updates!

  52. Keith says:

    I figured out the cover photo size a while back, and ave been using it just fine to generate cover photos in iPhoto that work on a big screen and an iPad. But on an iPhone or iPod Touch, it’s all screwed up, keeping the absolute height, but cropping the sides to fit, rather than proportionately shrinking the whole thing.

    What trick am I missing here?

    Thanks.

    1. Dave Demuth says:

      That sounds like a Facebook issue with not being ‘responsive’ to small screen widths.

  53. Fabian says:

    Hey Dave,
    thanks for the template. Saved me a lot of time 🙂
    regards,
    Fabian

  54. devin says:

    thank you so much for this it saved a lot of time thank you so much

  55. Thank you for sharing! It looks like sizing are the same now as they were then… ?

    1. Greg Rogo says:

      The dimensions of the cover are indeed the same but the location of the profile picture is now 15px from the left and 172px from the top.

      Here is one I created… http://cbud.me/ytptn

  56. Casey (Karen) James says:

    Quick question on what the resolution is set for when creating cover banners ………………. 851 pix x 315 pix @ 300 DPI or 150 DPI or ???????????????????????
    And if we do the 300 DPI how do we resize for optimal resolution when uploading to FBook??

Leave a Reply

Your email address will not be published. Required fields are marked *