Facebook makes it easy to change cover images. It also makes it easy to end up with poorly cropped cover images that make your business page look unprofessional.
When Facebook changed their business page layout so that the logo image was no longer on top of the cover image, they didn’t make it easy to figure out how to align the image for both desktop PCs and smartphones. The problem is, they said to upload a 828 x 315px image to the desktop, and Facebook will crop the image to 640 x 360px for your phone!
This didn’t make any sense, so it was time to experiment.
After screen grabbing the a cover image from both a desktop and a smart phone and manually resizing and lining them up in Photoshop, it turns out that the mobile subject area is only 563px wide. Facebook starts with your original cover image, crops out a 563 x 315px image in the center, upsizes it to 640 x 360px, and displays it on mobile devices.
Fortunately, this 24-bit transparent .png Facebook cover guide sorts this all out for you.
Click here to download the Facebook cover image guide. The cyan strokes show both the is the final cover image size and the subject area which will be displayed on mobile devices. It’s easy to use, too.
1. In Photoshop, open the image you want to use for your Facebook cover and make a duplicate layer.
2. Open the Facebook-guide.png file in Photoshop, duplicate the layer, and drag it over your cover photo as a new layer. (Tip: you cannot drag the transparent part of the image. You must put your mouse on the cyan stroke to drag it.)
3. Move the Facebook-guide over your cover photo until you’re happy with the outside crop. On smart phones, the cover photo will be displayed using the inside crop. You can add text layers if you want – just keep them in the mobile subject area (inside crop). You can also resize the image layer beneath the guide, but make sure you don’t make the image layer any smaller than the outside crop stroke.
4. When you’re happy with your subject area alignment, set Facebook’s crop image size to 828 px wide x 315 px height @ 72 dpi and crop the image over the guide.
5. Hide the Facebook-guide layer.
6. Select File > Save for Web and Devices. Save your final cover photo image as an JPG file. I typically use 80% quality. Facebook recommends you use sRGB color, and keep the final file size under 100kb.
7. Exit Photoshop without saving so you don’t destroy the original image files.
To update your logo image, use a 180x180px square image.
Pro tip #1: If you don’t have an image editing program, try pixlr.com. It’s free.
Pro tip #2: If your cover photo or profile image doesn’t look right, don’t be afraid to upload another one, then delete the post that says “updated his/her cover photo.”
- Make sure your name and business classification are correct. Facebook will overlay them on your image. If you use a business page, take a moment to set up your call to action button.
When someone visits your Facebook page the first thing they see is your cover photo. Because of its prime location, you may be tempted to use your cover photo for promotional purposes. According to Facebook, your cover photo can’t contain any of the below items:
- Contact information, such as web address, email, mailing address or other information intended for your Page’s “About” section. Use the About section instead.
- References to user interface elements, such as Like or Share, or any other Facebook site features
- Calls to action, such as “Call now” or “Tell your friends”