Designing a Facebook cover that works on mobile

Most people who look at your cover will see it on a phone. Facebook's own figures have put the share of mobile users far above desktop for years, and for many profiles the computer view is now the exception. Yet covers are usually designed on a big monitor, where everything looks roomy. Then they go up, someone opens the profile on a phone, and the name is cut in half.

This guide walks through the habits that make a cover hold up on a small screen. For the exact measurements, see the size and safe zone guide.

Design for the middle first

The phone app keeps the center of the cover and drops the sides. On an 851 x 315 cover, the visible part is a box about 560 pixels wide in the middle. So start there. Put your text, your logo or your main subject in that box. Then extend the background out to the sides so the desktop view doesn't look empty.

A simple way to do this in any editor is to draw a 560 x 315 rectangle in the center of your canvas, design inside it, and delete the guide at the end. In our cover maker the phone crop overlay does the same job, and the small phone preview shows the trimmed result as you go.

Think in thumbnails

On a typical phone the cover is shown somewhere around 360 to 430 points wide, smaller than a playing card held at arm's length. At that size:

• Lines thinner than a couple of pixels disappear.
• Small text becomes a gray smudge.
• Fine patterns turn into noise or moiré.
• Faces smaller than a coin are unrecognizable.

A good test is to zoom your design out until it's about the width of your thumb, then look at it from a normal reading distance. If you can still tell what it's about, it will work.

Bigger, fewer, bolder

The mobile view rewards fewer elements at larger sizes. One headline beats a headline plus a subheading plus a tagline. One strong shape beats ten small ones. If you're using a pattern, choose one with large pieces. In the maker, the geometric style with big tiles or the waves style both survive the small size well, while a dense confetti pattern works only as background texture.

For text, aim for a main line that's at least about a tenth of the cover's height. On an 851 x 315 canvas that's a font size of 30 pixels or more. The maker shrinks text that doesn't fit its box, so if your line keeps getting small, it's a sign the line is too long.

Mind the profile photo

On phones the profile photo is large relative to the cover. It overlaps the bottom edge to the left of center and can hide a good chunk of the lower-left area. Anything you place there will be partly covered. Keep that corner for background color and let the photo sit on top of it.

Centered text clears the photo on most layouts. If you want the text off-center, push it to the right side of the safe box, where nothing overlaps.

Contrast matters more outdoors

People look at phones on buses, in the sun and with the brightness turned down to save battery. Low contrast that looks subtle on a calibrated monitor becomes unreadable in those conditions. White text on a pale yellow background, or dark gray on navy, fails first.

The accessibility guidelines used on the web (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A cover headline usually counts as large text, but aiming for 4.5:1 gives you a margin for bad lighting and compression. The maker shows an estimate under the preview, based on the actual pixels behind your text. If it's low, try one of these:

• Switch the readability option to a color band behind the text.
• Pick a darker or lighter palette, depending on your text color.
• Move the text to a calmer part of the background, often the top.

Watch for compression

Facebook compresses covers more aggressively than you might expect, and the phone version is a smaller file again. Gradients can pick up visible bands, and colored text on a busy background can get fuzzy edges.

Uploading a PNG rather than a JPG helps with text and flat color. A little grain, like the maker's film finish, can also hide banding in smooth dark gradients, because it gives the encoder some texture to work with.

Dark mode

The Facebook app has a dark mode, and many people use it. Your cover doesn't change, but what's around it does. A cover with a white background sits like a bright slab on a dark screen. A very dark cover can blend into the dark interface, so its edges disappear.

Neither is wrong, but it helps to look at your cover both ways. Mid-tone backgrounds and covers with some color at the edges look good on both.

Check it on a real phone

The previews in any tool are a guide, not a guarantee. Before you settle on a design:

1. Download the cover and open it in your phone's photo app.
2. Pinch to the size it will appear on your profile and check that you can read it.
3. Upload it, then open your own profile in the app and in a mobile browser. Look at it in light and dark mode.
4. Ask someone else to look at it on their phone. Different screen sizes crop slightly differently.

If something gets cut, it's usually an easy fix: shrink the text a little or move it toward the center, then upload again. Facebook keeps old covers in a "Cover photos" album, so you can switch back if you need to.

A mobile-first checklist

Before uploading, go through this list:

• Main text and subject inside the center 560 x 315 box (on an 851 x 315 canvas).
• Lower-left corner free of anything important.
• Text no longer than about 12 words, at 30 px or more.
• Contrast of 4.5:1 or close to it.
• Large shapes rather than fine detail.
• Exported as PNG if there's text or flat color.

Once a cover passes these on a phone, it will almost always look fine on a computer too, since the desktop view shows more of the same image.

Questions