How to Make Your Facebook Cover Image Look Awesome on Mobile

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?

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.

Facebook cover image on desktop computer

Facebook cover image on mobile device with sides cropped offThis 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.

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).

It is crucial that your Facebook cover image look as great on mobile as it does on a computer. Click To Tweet

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

 

Facebook cover image with the correct dimensions for displaying on Mobile

The white area is the safe area — no elements will be covered on mobile or desktop

 

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

Mashable mobile cover image

  • Rovio: the profile picture is obscuring some elements in the cover image, but the overall design still works well on mobile

Rovio mobile cover image

 

  • The Walking Dead: while it’s obvious that some information has been cropped off the overall design still looks great on mobileThe Walking Dead mobile cover image

I was able to figure out another solution to the mobile problem by looking at the cover photo on my personal account.

Facebook cover photo showing how it is cropped for mobile and desktop

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.
Facebook cover image with the extra height for displaying on Mobile

The white area is the safe area — no elements will be covered on mobile or desktop

  • this is what it looks like on mobile

A Facebook cover image that looks the same on desktop and mobile

Use these handy downloads to help create your next Facebook cover image.

Download: Solution 2: Facebook cover image – with extra height for mobile devices | Download: Solution 1: Facebook cover image – mobile safe

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.

Need help creating a Facebook cover image?

EQ can help!
How to Make Your Facebook Cover Image Look Awesome on Mobile

Pin for Later

You may also like

2 comments

  • Sourav October 21, 2015   Reply →

    This is a very useful tip. This layout cheat-sheet of which is the exact safe area to put content on a Facebook cover page will come handy to many people. I am sure many aren’t aware of this.

    • Dana October 21, 2015   Reply →

      I’m glad to hear you found it useful. When I was researching this post, I noticed that even some major companies don’t have cover images that translate well onto mobile.

Leave a comment