Got the right Facebook Page Cover Photo size?
Want it to look good on both desktop AND mobile?
Smart! Optimizing your Facebook content for mobile is non-negotiable, since most Facebook users will only see it there.
But you can have it both ways: Here’s a Facebook Page Cover Photo mobile template that shows the 3 different croppings for phones, tablets, and computers.
Updated for the New Facebook Pages Experience 2022-23! Unfortunately, it’s not as simple as before this “Page update.”
So read on…
3 Reasons to Optimize for Mobile
1 | Facebook users who visit your Page on desktop only see a sliver of your cover photo unless they scroll up. See screenshot below.
2 | Almost 4/5 of users will never see your Page on desktop. 79% of Facebook users ONLY access the site by mobile (up from 51.7% in January 2016). source
3 | Virtually all users will see your Page on mobile at some point. In 2020, 98 percent of active user accounts worldwide accessed Facebook via mobile devices. source
Facebook Page Cover Photo Confusion
Facebook has 4 different kinds of cover photos, each with a different shape on desktop vs. mobile.
Cover photos have a wider aspect ratio on desktop. They’re taller on mobile.
This isn’t because Facebook is trying to confuse designers! It’s because a browser window is wide. A mobile device is tall. FB is trying to accommodate these completely different displays.
However, Facebook doesn’t help us much when they tell us:
Your Page’s cover photo:
Left aligns with a full bleed and a 16:9 aspect ratio.
Must be at least 400 pixels wide and 150 pixels tall.
Loads fastest as an sRGB JPG file that’s 851 pixels wide, 315 pixels tall and less than 100 kilobytes. source
This doesn’t take into account the different proportions on various devices. And the sizes they’ve named aren’t even 16:9 aspect ratio!
This article will explain how to create Facebook Business Page cover photos ONLY, that are sized properly mobile devices as well as desktop.
For other cover photos, click the links for details and free templates:
What’s New in “New Facebook Page Experience” Cover Photos?
The mobile version is still a delightfully simple 16×9 proportion.
BUT the profile picture is now covering a huge portion of the cover photo!
The iPad also has a huge DP overlay but in a different spot. And the tablet cover photo is cropped on the sides, whereas the desktop version crops top and bottom!
Facebook Page cover photo on desktop
The cropping on the desktop version is severe in the New Pages Experience.
At the last recommended size of 820 pixels wide by 312 pixels, it’s actually cropped down to only 303 pixels tall.
Here’s how the mobile to desktop crop plays out now. The purple dotted line shows the 16×9 cover photo on mobile while the green dotted line shows how it crops on desktop:
More details on sizing when you get to my template further down this article.
The biggest visual differences on desktop are:
1 | The positioning of the profile picture below the banner image. There’s only a tiny bit of overlap, so this won’t mess up your banner design (unlike on mobile).
2 | The gradient bar at the sides. If you’re struggling with how it looks, I’ll explain more about it at the end of the article.
Facebook Page Cover Photo Mobile / Desktop Template 2023
Love to design with Photoshop, or another Canva alternative?
Your mobile Cover Photo will no longer have elements rudely chopped off or covered up with this template.
Start with a 16:9 image in the size you prefer. Pay attention to the profile picture overlap on phones and tablets. Don’t place important details where they’ll be covered.
The crop on desktop is only 303 tall if you use the 820 pixel width. This gives you 79 pixels top and bottom that will be cropped from your 16:9 starting image.
You have a choice of 2 templates here: low resolution (820 x 461 pixels) and high rez (1200 x 674 pixels).
I do recommend that you make your cover photo larger than 820 pixels for best resolution. The one just below is 820 pixels wide, Facebook’s previously recommended width.
Just right click the image below to download, and choose “Save Image As…”
For high-resolution version and instructions, keep scrolling!
Facebook Page Cover Photo template, UPSIZED!
Even better – Make your Facebook Page Cover Photo BIGGER! I recommend 1200 x 674. Right click here to download the LARGE template.
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.
Best Photoshop Solution for Facebook Cover Photos
Photoshop Smart Objects! They let you preview how your design will look on desktop, phone, and tablet. Move your images and text around and see the mockups update before your eyes!
Purchase these social media header templates on Creative Market.
Disclosure: 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.
How to Upload your Facebook Page Cover Photo
When you upload your Cover Photo on desktop, you can adjust the top cropping so it’s positioned top-to-bottom exactly as you like it.
If you upload on mobile, it will crop to center automatically in desktop view. However, I don’t recommend this, as the compression is terrible!
Stick to uploading a PNG file via your desktop computer and it will look 10 times better.
New Facebook Page Cover Photo Gradient
A fairly new addition to Facebook cover photos is a gradient (or ombré) color bar to the left and right of the cover photo on desktop.
The gradient can add a nice splash of color when you have a solid background that reflects your brand colors.
Or it can look weird if your cover photo is actually – a photo! Or has different color blocks on either side.
Here’s how it works: Facebook is pulling a color from the top outer edges of your header image. And if the image is different on either side, then so is the gradient.
You can see a couple examples below to help inform your cover photo creation:
Optimize your Facebook Cover Photos!
Don’t forget to visit these other articles for details and more FREE cover photo templates:
For all Facebook dimensions, including ads, check out:
ALL Facebook image dimensions with infographics
For all the social media platforms in one place, with links to in-depth articles on many of the topics:
Ready to make your Facebook Page cover photo the easy way?
Try Snappa online design tool for free!
Their templates give you the perfect size, with safe zones to ensure your beautiful design looks great on both desktop and phone.
Disclosure: IF you upgrade to a paid plan, I may receive a referral fee.
What do you think? Now your Facebook Cover Photo size can rock on mobile just like on desktop! Share with a friend.