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 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:
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 :
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:
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.
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.