How to Make Your Facebook Cover Image Look Awesome on Mobile
Have you ever seen a Facebook cover photo that looks amazing on your computer, but looks awful on mobile?
Please note: Facebook has changed how they display cover images and this information may be outdated.
I encountered this exact problem when creating the Facebook cover photo for the EQ page. I dove into making the image at the Facebook recommended dimensions of 851px by 315px. While my cover photo looked great on my computer, something was missing on mobile. And that something was about a quarter of my information that had been cropped off on either side.
This happens because the whole image isn’t displayed on mobile. Facebook displays the full height of the image but crops the sides to fit the much smaller mobile width. Plus the profile picture displays larger, obscuring even more of the cover image.
It is crucial that your Facebook cover image look as great on mobile as it does on a computer. Click To Tweet
Some people may just give up, believing their cover image will never look awesome on mobile. But a whopping 70% of people use a mobile device to access Facebook. While 44% of people only ever use a mobile device on Facebook. (By the Numbers: 60+ Amazing Facebook Mobile Stats).
But how do you achieve this?
There are two ways to get around the mobile display problem:
1. Design your Facebook cover image with mobile in mind
- use the Facebook recommended dimensions of 851px X 315px.
- center all the key elements of your design (remember that approximately 145px will be lost on either side).
- don’t put any important information on the bottom of your image — it will be covered by text, buttons, and your profile picture
As you can see from the above image, there’s not a lot of usable space left.
Some companies are still able to pull off a great image
- Mashable: this simple design works perfectly on mobile
- Rovio: the profile picture is obscuring some elements in the cover image, but the overall design still works well on mobile
- The Walking Dead: while it’s obvious that some information has been cropped off the overall design still looks great on mobile
I was able to figure out another solution to the mobile problem by looking at the cover photo on my personal account.
As you can see from the above image
- the cover photo that displays on my computer (red frame) uses the whole width of the original photo (pink frame).
- the image that displays on my mobile phone (teal frame) uses the whole height of the original photo.
Using a little math (your high school math teacher was right, you will need math again) I was able to figure out solution number two:
2. Design your Facebook cover image to display the same on desktop and mobile
- instead of creating an image that is 851px by 315px, create an image that is 851px by 475px.
- Facebook won’t crop the sides off on mobile. Instead, it will use the extra height to fill the skinnier cover image area.
- don’t put any important design elements or information in the bottom 225 pixels. It won’t show on desktop and will be covered by text on mobile.
- this is what it looks like on mobile
Use these handy downloads to help create your next Facebook cover image.
Both templates are a transparent png that can be placed directly over your next Facebook cover image design to make sure that all your essential elements are in the viewable area.