Facebook cover photo size and safe zones

Facebook covers are awkward because the same image has to work in two different boxes. On a computer the cover is a long, thin strip. On a phone it's closer to a widescreen TV. Your profile photo sits on top of both, near the lower left. Once you know where those boxes fall, getting a cover that looks right everywhere is easy.

The numbers

These are the sizes Facebook has used for profile and Page covers for several years. They change rarely, but they do change, so if your cover suddenly looks off after an app update, check Facebook's Help Center for the current figures.

The cover maker on this site exports 1702 x 630 by default, twice the recommended size in each direction. On high-density phone and laptop screens, double resolution keeps text and edges sharp. Since the shape is identical, Facebook doesn't crop anything extra.

Profiles and Pages use the same cover

Years ago, personal profiles and business Pages had different layouts. Today they share one, and the cover area is the same size on both. You don't need a separate "Page cover" file. Make one cover and use it on your profile, your Page, or both.

Groups and events are different. A group cover is much taller (around 1640 x 856 is the common recommendation) and an event image is a 16:9-ish rectangle. Covers made for profiles will be cropped heavily if you use them there, so make those separately.

What the phone crop does

This is the part people miss. The phone app shows the cover at 16:9, which is taller relative to its width than the 2.7:1 upload. Facebook keeps the full height and trims the sides.

In an 851 x 315 cover, the phone shows roughly the middle 560 pixels of width. That means about 145 pixels disappear from each side. On a 1702 x 630 cover, double those numbers: the middle 1120 pixels survive and about 290 go on each side.

Anything that has to be seen, such as your name, a slogan, a date or a face, belongs in that middle slice. The sides can hold color and pattern that's nice to have on a computer but isn't needed.

In the maker, the "Phone crop" overlay darkens the parts the app hides and draws a dashed box around the part it keeps.

What the desktop view trims

The desktop display is nearly the same shape as the upload, so very little is lost. Depending on the window size, a thin sliver comes off the left and right edges, around a dozen pixels on an 851-wide cover. It's enough to clip text pushed right up against the edge, so leave a small margin. The "Desktop edges" overlay in the maker marks this.

Where the profile photo lands

Your round profile photo overlaps the cover near the lower left. On a computer it hangs off the bottom edge, partly over the cover and partly below it. In the phone app it's larger relative to the cover and sits further in from the left, again across the bottom edge.

Facebook moves this around a little between app versions, and the overlap depends on screen size, so treat any measurement as approximate. A practical rule is to keep the lower-left quarter of the cover free of anything important. The maker's "Profile photo" overlay shows two circles, one for each layout.

This also explains why centered text is the safest choice. It avoids the photo on both layouts, and it's in the slice the phone keeps. If you want text off-center, move it right, away from the photo.

A safe zone you can remember

If you don't want to think about any of this, use these rules on an 851 x 315 canvas:

• Keep text and faces between about 150 and 700 pixels from the left.
• Keep them above the bottom 60 pixels or so, which the profile photo and the name area crowd.
• Leave the bottom-left corner for background only.
• Keep 20 pixels clear at every edge.

That leaves a rectangle in the middle roughly 550 by 200 pixels. It's not big, which is another argument for short text.

File type and quality

Facebook recompresses every cover you upload. Two things help it come out clean.

First, upload at the right shape. If you upload a photo with a different shape, Facebook asks you to drag it into position and then scales it, which costs sharpness.

Second, pick the right format. For photographs, a good-quality JPG is fine. For covers with text, logos, flat colors or sharp edges, a PNG usually survives compression better, because JPG artifacts show up around letters. The maker downloads PNG files for that reason. Facebook's own help pages have long suggested small sRGB JPGs for fast loading and PNG for covers with logos or text.

If your colors look duller after uploading, the image may have been saved in a wide color space such as Display P3 or Adobe RGB. Export it as sRGB. Covers made in the browser with the maker are already sRGB.

Checking your cover before you upload

Before you replace a cover that people are used to seeing, do a quick check.

1. Turn on all three overlays in the maker and look for anything important under the dark areas or the circles.
2. Look at the small phone preview next to the main one. If you can't read the text at that size, it's too small or too long.
3. Glance at the contrast estimate under the preview. Over 4.5:1 is comfortable; under 3:1 is hard to read.
4. Download the PNG and look at it on your phone's photo viewer, zoomed out, before uploading.

After uploading, Facebook lets you reposition the cover by dragging. If your file is the right shape, you shouldn't need to; just save.

When sizes change

Facebook has changed its profile layout several times since covers were introduced in 2011, and each time the crop and the profile photo position moved a little. The upload size has stayed at the same 851 x 315 shape for years. If a future redesign changes things, we'll update the maker and this guide. Our guide to designing for mobile covers the design side of the phone crop in more depth.

Questions