Facebook Mobile Cover Photo Tips & Tricks (2017)

By Brent Walker     |     June 09, 2017

As I worked to update Room 214’s cover photo templates (see free downloads below) a funny thing happened: I noticed a truckload of people were visiting a previous Facebook mobile cover photo tips blog post I wrote. In 2015.

While 2015 was technically only two years ago, as far as the internet is concerned, it was closer to an eternity ago.

I love that people are using our resources and (hopefully) following our advice, but we’re long overdue for an update. Why?

Here’s the thing about Facebook cover photo image sizes – everyone is wrong about the optimal size. Even Facebook recommends a desktop-centric size – 851x315px. I’ll say it again – this is wrong.

Designing mobile-first is important — 1.74 billion people are using Facebook on mobile, versus just 798 million in 2015. I don’t know about you, but I don’t want to alienate 1.74 billion people.

The fix is simple — keep the recommended 851px width, but make your image 475px tall. If you place your content properly, you won’t lose anything important on desktop, but your content will shine on mobile.

Check out our infographic to help you visualize what it’ll look like, and download our free templates in Adobe Illustrator Template(.ait), Photoshop(.psd), and PNG versions.

Three tips:

  • A PNG file will help keep any text and images looking as sharp as possible. However, Facebook does have a max file size (100 kb). Make sure your file is under this size or Facebook will compress it, and it will throw all your hard work under the bus. And then it will back up over you again just to make sure it finished the job. Saving as a JPG can help your file size, in a pinch.
  • Pay attention to the “No more than 20 percent text” rule — while technically deprecated, Facebook will still hurt the feed placement of your cover photo if there’s too much text (or logos!)
  • Be thankful business pages no longer have the profile photo overlapping the cover photo — this allows for much more flexibility with text. However, you still have to optimize for both mobile and desktop views. Pay attention to how wide your content is, and where it’s placed in the image so it displays nicely on both mobile and desktop.

About Brent Walker

Brent is an interactive designer who loves merging form and function to create innovative, beautiful, and effective design. He prides himself on his ability to find unique solutions, and learn any and every tool he can get his hands on. Outside of work, he can probably be found climbing, mountain biking, or appreciating fine whiskey.

Leave a Reply

Your email address will not be published.