Want your Facebook Profile Cover Photo size to look good on both desktop and mobile?
Facebook doesn’t make this easy, because all their cover photos display differently on different devices.
THIS post is only about the Facebook Personal Profile Cover Photo size.
It’s updated for “New Facebook” and works correctly in 2022.
I have the other Facebook cover photo templates and tips too – links below the video.
The Facebook personal profile header for 2022:
- “New Facebook” compliant (changed in 2020).
- Has a round profile picture (2019).
- Phone and tablet cropping are similar (2019).
- FREE simplified cover photo template for non-Photoshop users.
- FREE Facebook cover photo PSD template.
Follow these links if you need to make a header for a business page, group, or event, and get a FREE template for each!
Facebook profile cover photo size 2022
Facebook’s recommended size for the personal profile cover photo is 851 x 315 pixels.
This is an aspect ratio of 2.7:1, which only works on desktop (for the 10 people who still access FB on computer).
They also state a minimum of 720 pixels wide.
Your priority should be designing for mobile, since that’s how the vast majority of FBers use the app – so go both larger and taller than Facebook’s suggested size.
The best Facebook profile cover photo size is 1242px x 700px. This is an aspect ratio of 16:9.
This size will work on ALL devices, with the cropping happening for the few people viewing FB on computer. Read on to download your choice of free templates.
“New Facebook” personal profile cover photo
The New Facebook design has now taken over. There’s no reverting to Classic.
The cover photo size itself hasn’t changed, but the Facebook profile picture overlay is vastly different.
The profile picture is round in the cover photo overlay, in addition to all the places it appears round when on its own (such as in the Facebook news feed).
In “New Facebook,” the main difference is that the round profile picture overlay on desktop has moved from the lower left to the center (2022 update note below).
Plus, the corners of the cover photo are slightly rounded. Hard to even tell on the lower corners, but the top corners on mobile have a pronounced curve. Beware of this if you’re trying to include a frame border (which I recommend against anyway, due to the cropping differences on various devices).
On desktop there’s a strange gradient across the top of the page, which picks up the uppermost colors of your cover photo (as cropped on desktop). If it’s a color you dislike, or clashes with your business brand, you’ll need to pick a different photo, or crop it differently. You can’t control the gradient color except by your choice of cover image.
You can see a mockup of this below, which I pulled from the Photoshop templates you’ll hear more about later on this page. But first, note:
Personal profile UPDATE April 2022!
There have been a few minor changes to the personal profile display. The most noticeable is that the profile picture on desktop has moved to the lower left, where it barely overlaps the cover photo. On mobile it appears to have gotten a bit smaller.
In addition, I could not find a Facebook-recommended size for the personal profile cover photo anywhere. They only say it must be at least 720 pixels wide. source
The biggest change I personally noticed is the difference in cover photo cropping between desktop and mobile. My guess is that this is determined by AI and thus will vary by photo. SO, it will require more testing before I can provide an updated template.
If you would find that useful, leave a comment and I’ll squeeze it in my schedule.
My free PNG template download directly below is 1242px by 700px, which is what I measure on my iPhone. You can see how it crops on desktop, as well as where the profile picture overlay is placed on both devices.
You can simply right-click to save my pink-and-purple “New Facebook” template below ⬇️ It was updated in 2020 and still works in 2022. (NOTE: It appears FB has changed again, see note above).
In addition, be aware that when a FBer visits your profile page on desktop, only the bottom sliver of your cover photo will be visible unless they scroll up. (NOTE: As of April 2022, this only seems to happen when you view your own profile).
You can upsize or downsize this template as you wish. If you do, I recommend doing so before you add your background photo.
The layered PSD template is in the next section. But first, how to use this PNG file if you prefer it.
Instructions for using my social media templates
1 | Open in Photoshop or other graphics editing program that has layers.
2 | Change Image > Mode to RGB (the template is an indexed color PNG).
3 | Add guidelines to match template, or use template as a translucent layer for guidance.
4 | Delete template from image file when your design is done.
If your design program doesn’t have layers, you can use them for size and visual reference.
There are more social media templates in the Free Member Area.
Compare Canva alternatives easy design tools if you don’t have a favorite yet.
Facebook profile cover photo PSD template 2022
Read on for a guest post about personal profiles from designer Oliver. The instructions and free template below are for use in Photoshop.
How to design Facebook profile cover photos with previews for mobile devices
Designing profile and cover photos for social media platforms can become quite challenging when it comes to guessing what your design will look like on mobile devices. Especially when you are working for a client and absolute precision is needed for every element.
Wouldn’t it be nice to see misplaced text or cut off logos on mobile devices already during the design process in Photoshop?
The social media profile mockup files from Feingold Design Agency can be used to preview a profile for desktop and phone during its creation in Photoshop. There are a bunch of files for different social media platforms available, but the mockup file for private Facebook profiles was made available free of charge and can be downloaded here.
So how does it work?
When you first open the Photoshop document, you will notice that every text block is editable. This is how you can make this mockup look like your profile or even translate the entire profile into another language, quickly and easily.
Up-to-date profile and cover photo sizes are already prepared inside the Photoshop documents Smart Objects, so you don’t have to worry about resolution and color profiles.
What are Smart Objects?
Smart Objects are layers in Photoshop which contain a separate independent Photoshop document.
In this case the Smart Object layers enclose our profile and cover photo. To get started, simply open the two Smart Object layers by double clicking their layer icons. Any changes you make inside these Smart Objects will show up on the mockup file after you have saved the Smart Object.
Working on a new social media profile design will immediately feel quicker, as you will have the extra benefit of neat, ready-made previews for desktop and phone right inside Photoshop.
When you are done developing your new design, all that is left to do is to save the Smart Object files for web and upload your results to Facebook. You could even use the mockup to present to your client, showing your fresh social media design as it will look online!
You can download the free Facebook profile mockup for Photoshop on Feingold’s Behance profile. The file works in Photoshop CS6 and CC. For additional help you can watch an extended version of the introduction video directly below, or take a look at the PDF help guide.
Did this help your Facebook profile cover photos?
I hope you enjoyed this Photoshop tutorial with free template!
Oliver has more social media header templates available for purchase on Creative Market. These also use Photoshop Smart Objects.
Note: I’m a Creative Market affiliate and will make a small referral fee if you purchase.
I believe the small cost is well worth the time you’ll save. If you purchase, you’ll also get annual updates!
- Prepared for high-res displays: delivered in 2k resolution.
- Resizable without loss of quality: all layers are vector-based.
- Mobile and desktop mockups can be moved and rearranged.
- Customizable background color.
- A transparent background can be used as well.
- Optional round device corners.
You can test his Facebook profile cover photo template before you buy the set!
And don’t miss these constantly updated FREE cover photo templates for:
Check out all the optimal Facebook image dimensions here!
Let us know in a comment what you think about the FREE Facebook profile cover photo template!