Facebook Cover Photo & Profile Picture Sizes + Photoshop Template & 7 Top Tips

Facebook Cover Photo & Profile Picture Sizes + Top TipsFollowing on from our post last week about image sizes for your Google+ Business Page, this week our attention turns to Facebook Cover Photo & Profile Picture sizes as we reveal some of the tricks of the trade to get your images looking sharp.

Oh, and just like last week we’ve included a downloadable Photoshop Template to get you started!

 
Facebook Cover Photo & Profile Picture Sizes
Download Template

The dimensions for your Facebook Business Page images are shown below along with a diagram to demonstrate them in action. Click on it to view the full size version.

Cover Photo Size: 851px x 315px   |   Profile Picture Size: Min 180px x 180px

Facebook profile cover photo and profile picture sizes

View Enlarged Version
Download .psd Template

7 Tips for using our Photoshop Template to get your Facebook Images Looking Great!

  1. Our Facebook Photoshop Template includes layer masks and correctly sized slices allowing you to simply drag and drop your images and quickly export them at the correct sizes.
  2. When you publish your (180x180px) profile picture you will notice that it doesn’t display quite how you were expecting. It would appear that Facebook removes (or conceals) a thin area all around the edge of image. This is highlighted if the main content of your profile picture extends to the very edge of your 180 x 180px slice.
     
    There are two ways to overcome this. You can either a) rework your image so that all parts are visible – this is basically trial and error or b) use a nifty feature which allows you to ‘scale to fit’. Simply hover over the image, click ‘edit profile picture’ > ‘edit thumbnail’ and tick the box. Be warned though this option will inevitably mean your image loses some quality but its certainly quicker than reworking.
  3. Facebook has a serious problem with image compression which can make your .gif and .jpg, imges look really poor. The answer as we’ve found is to use .png format without losing any quality. Assuming Facebook’s image compression is designed to reduce file size, this is a strange one as of course .png files are traditionally larger than .gif or .jpg. Perhaps Facebook have done this specifically with us web designers in mind. That would be a first!
  4. Your profile picture will also be displayed next to your posts, albeit at a much smaller size of 32px x 32px. You don’t need to upload a separate, smaller version because Facebook automatically resizes your profile picture. You should try then to make sure that your profile picture is a good quality so that the smaller version also remains clear when resized.
  5. It’s worth giving some thought to your profile picture because it will help your posts to stand out. Many people will tell you that you should use an actual photograph of yourself and there is nothing wrong with that. For the time being we are using a brand image because this is a business profile and I think the logo icon we’ve created stands out well against the neverending sea of headshots. Either way, make sure your cover photo is colourful and consider using different shapes within your image to help it to stand out.
  6. When publishing and re-publishing images (until you get them right), Facebook notes each upload and will display these as posts on your profile. Having 26 posts saying “Company A changed their profile picture” doesn’t look too hot so remember to delete those posts when you’re done.
  7. Don’t forget to test your new Facebook profile design on your mobile. As we’ve just discovered, profile pictures display much larger when viewed on Facebook for iPhone and actually cover a larger proportion of your cover photo which could interfere with your design.

Web Design Directory Google Plus Business Profile Page

Check out our Facebook Business Profile page and tell us what you think!

avatar Name: James Briggs
About: James is a Digital Marketing Consultant with over 12 years of design, development, search engine optimisation and project managment experience previously fullfilling a number of senior roles for two of the South's most well established and successful digital marketing agencies before setting up WebSafe Solutions Ltd in 2009. In his own words..."I've planned, designed and developed countless websites and am proud to have helped hundreds of clients to get the very best from their digital marketing campaigns. Some would say I have an unusual blend of knowledge, skill and experience and for my sins I'm an absolute perfectionist!"
Posts by James Briggs (29)