Customize Facebook’s Cover Picture – Dimensions & Template
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 "Customize Facebook’s Cover Picture – Dimensions & Template"
Thanks for the template. Looks great 😉
Brian, you’re welcome. Glad I could help. Thanks for checking it out.
Facebook is too confusing. Wouldn’t be able to figure it out without some help.
That’s why I’m here, Joe.
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.
Thanks Maggie! Glad you were able to use it.
I tried to upload a profile picture of 135×135 and facebook gives me an error saying it must be at least 80pixels wide.
Sorry that’s *180
I appreciate the template you’ve provided- how do I use the template in Lightroom 3.6?
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.
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.
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!
Thanks for the template. Digital scrapbooking is my hobby so I wanted to make my own cover. You really simplified it!
So helpful! Thank you so so so very much!
The template worked perfectly. Thanks a bunch!
Most welcome! Glad I was able to help.
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!
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.
Very cool of you to provide. Looking forward to creating my cover pic with the help of your template. Kudos sir!
Thanks Dave,, you are really creative.
Thank you for the template. Just what I was looking for.
Thanks so much! Perfect timing with this template!
Hey Dave, thanks for posting this tutorial on the cover photos. Not to mention the template too. That’ll be a huge help!
Bravo 🙂 Thanks for the template!
Really appreciate the template, Dave… really helped. May you live to be a a thousand years old. =)
*shared everywhere to spread the love!
//D
Thanks Dave! This definitely saves me some time! 🙂
Hey Dave, thanks for the template! Very helpful. Nice write-up,too!
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.
You’re welcome. Thanks for the feedback. I will add a note in there about Facebook’s 180×180 image requirement
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 🙂
wow, you rock! thanks!!
You rock! Thanks Lacey.
Thanks a lot
and there’s the result: https://www.facebook.com/aIQbale
Kicking ass in SEO I see! Haha. Came across your blog entry first brotha in a semi-related mundane topic search. 🙂
Thanks!!!
Dave,
I think Facebook just increased the size of the profile pic, do you know what is the dimension right now?
Thank you.
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.
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).
Could you please update all the dimensions, including how high the profile picture now cuts into the cover photo? Thanks.
I love that Facebook started doing the cover photos. They look great on profiles and are a cool marketing space for pages as well.
Super article – when I padded the top it came out great!
http://www.facebook.com/theSunriseMarket
thanks a lot!! very helpful 🙂 look what I did: http://www.facebook.com/cca9130
Thanks for the info:) I have downloaded the template. Now what? Is there a video somewhere with more info? Thanks again:)
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 !
Disregard prior message… your template solved the problem. Thank you !!
Nice, glad it worked!
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 !
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/
Nice, clean and simple. Big thanks.
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?
You will have to set up the dimensions described above in paintshop. I’m not a paintshop guy though 🙂
This was very helpful!
Thank You so much for your hard work.
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.
Most welcome! Enjoy.
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.
Thanks! I’ll take a look. Facebook could have changed it slightly in the last few months.
Anyone else encounter this?
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!
Yes, it changed!
Hey Dave! The profile picture starts now at pixel line 195 from the top.
Thanks for this update!
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.
Thanks for the template, You made my day.
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
A lot of ‘us’ designers just like to do our own thing. 🙂
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
Nice work using the thumbnail image!
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.
You’re welcome Stephen. Glad it help and saved some time.
Thanks for the template!
Helped me put up some topical stuff in a matter of minutes:
http://www.facebook.com/derek.brovold
Thanks for the template, Stephen!
Thanks for the template. Used it to create a cover and profile pic for the Vitiligo Society Facebook page. Regards. NR
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.
Thanks Jared. I will update and try to keep up with Facebook and their updates!
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.
That sounds like a Facebook issue with not being ‘responsive’ to small screen widths.
Hey Dave,
thanks for the template. Saved me a lot of time 🙂
regards,
Fabian
thank you so much for this it saved a lot of time thank you so much
Thank you for sharing! It looks like sizing are the same now as they were then… ?
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
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??