Otherwise known as: the Wonder of Whitespace.
I see so many otherwise professionally presented facebook or twitter profiles where an organisation logo has ended up with the ends chopped off, or squished to fit, that I thought I’d write this quick guide to getting that right.
A standard Facebook or Twitter icon, is square, like this one: 
A facebook icon is (at the time of writing) 138px on each side, when it’s shown 
on your own page, although it may be resized down to 50 x 50 pixels or even 32 x 32 pixels when it’s shown elsewhere within Facebook, like this :
A Twitter profile image could be shown when it is clicked on at a decent size – say 300 pixels square. But when it appears on your profile, it’ll be just 73 pixels square, and in someone’s tweet stream, it’ll be chopped down to a mere 50 pixels (and given rounded corners too!) And if it’s a ‘other people retweeted this’ type logo, it’ll be right down to 32 x32px – the smallest size shown here:
I think the first thing that’s obvious from that is that you need a fairly simple image that will be recognisable at small sizes – one with strong blocks of colour can work well.
But, what if you have an image that’s in landscape format, or that is way too tall and thin to fit a square box? Well you have two choices. You can chop bits off until it’s square. This can work well with photos :
But can be disastrous with logos:
The answer is, add more space. You can do this with an online tool such as http://pixlr.com using the Image – > Canvas Size command. This expands the area within the image by adding whitespace.
So you start with:
This is 180 pixels wide, so I adjust the canvas size to 180 x 180 pixels, to get:
Which you can now upload to Facebook and Twitter, and it will sit neatly within your icon box, and not get chopped or squished – it’s a bit larger than the provided space, but it is the right shape, which is the key. The image must be at least 180 x 180 to upload to Facebook – you may choose to make it larger, although if you have gone for a simplified image that will resize well to tiny sizes, there’s not a lot of point in making it huge.
You might want to make the best of the space available to you, and pop in a simple item to make it fill the box a bit better, such as:
And that’s still just about readable at 50 pixels square.
If you have more flexibility in how the image is shown, you could try playing about with the text size and arrangement a bit, like this:
Although a big brand would simplify things further, to an instantly recognisable very simple shape that could be of any size, this can be tricky for small businesses that find it harder to build instant recognition.
