Kupferman.com

Improving The Look of Your Company Logo on Facebook

Numerous companies have established their presence on and it surprises me that so many of them allow their — the image that defines them and captures their essence — to get cut off when displayed as on fan interest listings or wall postings. By following just a few guidelines it is possible to have your company logo look great on Facebook — as a profile picture and as a thumbnail.

Consider the following examples:

Examples of Company Logos on Facebook That Have Been Cut OffThis doesn’t have to happen! By following a few basic guidelines, it is possible to have your company logo look great whether as a profile picture, an interest icon or a wall posting thumbnail.

A Few Important Facebook Image Dimensions

While it is true that you can upload just about any graphic or image you like to Facebook, it never hurts to consider the size at which your logo will appear when it displays as a profile picture, interest icon or wall post thumbnail.

Element Width Height
Profile Picture 600px 200px
Interest Icon 75px 75px
Wall Post Thumbnail 50px 50px
Wall Post Comment 32px 32px

It would be great if it were possible to upload in all of these sizes. so that every presentation of your logo and your brand on Facebook was clean and perfect. However, you really only get to upload one image — the profile picture image — and then the system automatically creates thumbnails as needed. Which means that when you upload your logo you need to think about how it will appear in all sizes.

The Facebook Thumbnail Safe Area

To prevent your logo from getting cut off, you need to leave an appropriate border around the edges. Through trial and error, the folks at Mashable found that in order to avoid having your logo cut off on Facebook when reduced to a thumbnail you need to leave a “border” of about 6% on each side of the image. In other words, if your image is 200 pixels wide, you should leave a 12 pixel border on each side of your logo to ensure that it isn’t cut off. See the following example provided by Mashable:

Logos uploaded to Facebook for use as profile pictures and thumbnails need to leave a border on each side to avoid getting cut off.

Facebook Thumbnail Logo Safe Area from Mashable.com

Consider the following examples, which illustrate how some companies successfully uploaded logos to Facebook which look good in the comments:

Visual example of Reese's logo as it appears on FacebookNote the purple discoloration around the Reese’s logo. This appears to be caused by the way that Facebook compresses the images after they are uploaded. To prevent this from happening the best approach I’ve found is to use a slightly off-white color — perhaps a very, very light gray. If you just leave the background white — no matter what image format you upload — you are always going to get these artifacts.

McDonald's logo as posted to Facebook with example wall postingsMcDonald’s takes a slightly different approach to the border: instead of surrounding their logo with white, they continue their red logo all the way around. If you look closely you can also see that the top is slightly lighter than the bottom, giving a very subtle iPhone button like appearance to the wall thumbnail.

Example of Pringles Facebook Logo and how it goes right to the edgesSee how the Pringles logo goes right to the very top of the Facebook image/logo safe area. While this might not have been so attractive is the background were a different color, it works just fine here because the background is white and it has the impact of allowing the logo to butt right up against the top of the wall postings. One other thing that Pringles does that is interest on their wall posting is use a red board around the entire image — my impression is that this helps with the quality of the image AND it compensates for the color of the background:

Image of Pringles profile picture as it appears on Facebook, highlighting the border around the image area.

How Tall Should Your Profile Picture Be?

Facebook allows your corner image to be up to 600 pixels tall, but you will want to be thoughtful about how you use that space and you should spend a little time testing different versions to ensure that when your logo is shrunk down to a thumbnail it is shown and full and not cut off.

4 comments for “Improving The Look of Your Company Logo on Facebook

  1. October 31, 2011 at 10:19 pm

    A really helpful, clear and easy to understand post thanks. I’ve just noticed that the image I did for my profile picture isn’t too bad when facebook cuts it down for the posts. Perhaps another approach is to do a design within a design, so that what you are left with when its cut down is something you are happy with as well as the larger design for the profile picture.

  2. November 22, 2011 at 3:16 pm

    Thanks for the information.

    Just a note: for one of my clients, I had to actually leave a 20% margin on each side of the logo to keep it from being cut off (http://www.facebook.com/FreedomSolar).

  3. November 28, 2011 at 4:05 pm

    The most annoying part of the Facebook profile pictures is the compression used. Any evenly colored area gets totally destroyed. They should leave a PNG or GIF as they are or use a different setting for their compression. It really looks BAD.

    Compare this to the Google+ pages and you will see that their quality is absolutely perfect!

    So how can we get Facebook to do something about it?

Leave a Reply