Numerous companies have established their presence on #facebook and it surprises me that so many of them allow their #logos — the image that defines them and captures their essence — to get cut off when displayed as #thumbnails 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:
This 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 #images 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:
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:
Note 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 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.
See 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:
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”