Updated January 8th, 2013 with the latest instructions!
If you’ve ever tried to change your Facebook profile picture before, whether for your personal profile or fan page, you know how frustrating it can be. On top of Facebook’s technical glitches, which leave you wonder if you’re permanently stuck with that question mark of doom, the thumbnail never seems to look right.
On your personal profile thumbnail, you’re either a tiny speck in the distance or you’re showing off your left eyebrow. On your fan page, your brand’s logo is cut off. Here are some fan pages that still haven’t gotten it quite right:
Facebook recommends that profile pictures should be 200px wide. They height can vary up to three times the width. However, they don’t make it clear how the thumbnail that Facebook uses is generated from this picture.
You’ll find that Facebook crops images when generating a thumbnail, losing information around the edge. You can edit the thumbnail to drag it to a different part of your picture, but you cannot expand the thumbnail selection. So when you create your profile image that’s 200px wide, allow a 12 pixel border around crucial information such as a brand name or logo to allow for automatic cropping.
Also remember that Facebook thumbnails are always square, regardless of the shape of your profile image. So when designing rectangular profile pictures, make sure to keep your desired thumbnail imagery within a square boundary. Then you can edit the thumbnail selection accordingly.
Have the profile image specifications changed with the new Facebook Timeline Pages?
No. The rules above still apply. Your profile image will appear as a 125 x 125 pixel box, but if you attempt uploading a picture that small, you will see an error message! So intuitive, right? The dimensions above still apply to Timeline pages.
How to create a profile image with the correct dimensions
Create an image that is 200 x 200. The minimum upload size is 180 x 180, and the profile image will apear as 160 x 160, but I always create the image as a 200 x 200 file so it’s easy to know what border size I have to work with. Next, create a 12 x 12 border around the edge of your image. This will be the area that is cut off by Facebook in your thumbnail image. To make this easy for you, I have created a photoshop template that has a layer for this border.
Click here to download the Photoshop file: Facebook Profile Picture Template.
How to update your fan page profile image
Once you have the image created, go to Edit Page > Update Info in your Admin Panel.
Select Profile Picture in the sidebar.
Click Choose File and find the image on your hard drive.
How to edit your fan page thumbnail
After the photo uploads, click Edit Thumbnail below the picture.
Next, drag the little image until the main part of the profile image is within the thumbnail box. When you’re happy with the way it looks, click Save. That’s it!
This just doesn’t add up – Facebook is cropping my image by a lot more than a little border.
facebook is not giving users the proper specs for uploading images. I follow the guidelines and our thumbnail always look blurry.
Yes, that can be quite frustrating. There doesn’t seem to be anything the user can do about pixelation; Facebook is sizing down the images to ease the burden on their servers.
how do you do the above? My company profile pic has a rectangle shape to it but in the thumbnail’s it cuts in half so it makes it look really bad… i have no idea how to switch it to the suggestions you make above? Can you please help me out with it?
how do you do the above? My company profile pic has a rectangle shape to it but in the thumbnail’s it cuts in half so it makes it look really bad… i have no idea how to switch it to the suggestions you make above? Can you please help me out with it?
On home screen click your picture to take you to your profile page > hover over the profile picture and you should get a little message saying ‘change picture’ > click that then go to ‘edit thumbnail’ (just underneath your picture) > click ‘scale to fit’ or try dragging the image around with your mouse until you get a good fit. Hope it helps
Increase the size of your canvas in photoshop to a square shape…. ie 200px wide & 200 px height. Your logo should then be in the center.
thank you erin, that was the answer I have been looking for for a few days!
Thank you, Diana. Still, I wish FB would allow us users to designate a separate thumbnail instead of fumbling around.
Question for you: Are you (or the site owner) using a plugin/widget to create the “Article by…” box with your image and bio/contact info? I really like that.
Mike
It’s actually not a plugin, it’s some code I added to a custom template in my Thesis theme.
thanks a lot for this tutorial, It was really helpful
Worked for me. Thank you!
I am new to use facebook api.Can u help me to change thumbnail size by API.
Great post, we’ll try your suggestions!
budweiser is using a separate thumbnail than their profile pic. how are they doing this?
billions of dollars
Thank you so much for the help!
It’s definitely a pain. I made my images 176 by 176 on a white background. It looks like they crop about 93 wide and slightly above the middle. If you try putting the main part of the image you want displayed in that area it seems to be relatively close. Hope that helps!
FB uploads and converts any picture to JPEG, even if I make a 200×200 image with “content” as 176×176 and store it as a “low-quality” JPEG and then open it and pixel-edit the JPEG so it looks ok,.. the FB image converter will “destroy” and pixelate the image… most disturbing! Please add a check if the uploaded image have the correct size and aspect ration, do not convert/resize!
wrong. Facebook recommends 180 x 180 px
Even facebooks question mark doesn’t fit in the box properly *giggles*
any news on this – whatever i upload looks crap – have tried 180×540 200×600 yet the image just looks pixelated?
how did you get it to not pixelate? thks
If you look closely around the words, you can see that the image did pixelate a bit. I think the color choices hides it well.
I’ll do that
Its extremely frustrating trying to set up the 5pic pannel across the top. Trying to get the sizes right is really testing my patience!!! Thanx for the help
no fckin help
no fckin help
hm, okay. What about Twitter? Can you please write a post on what’s the optimum size for Twitter profile pictures? Twitter decreases your picture’s size significantly, it sucks.
It’s 97×69 now.
It’s 97×69 now.
It’s 97×69 now.
whats your process my facebook profile picture is big
I am about to embark on my face book profile for my lawn service. This information is fantastic. just what I needed to get started, Thank you Diana. and if you a free moment come and visit us.
Now facebook is telling when uploading too narrow pics: “Please use a picture close to a square”
Awesome idea, I’ll put this on my to-do list!
Thanks for the article. For those asking how to fit the image or logo properly inside the thumbnail next to your posts:
1. Click on edit page
2. Click on profile picture
3. Click on edit thumbnail
3. Select “scale to fit” box.
I tried that and nothing happens. It worked a couple days ago but not today.
mac
thanks diana, just what i needed to know.
Hi everyone, thanks for all of your comments! As requested in the comments and via email, I’ve updated this post with instructions on how to edit the thumbnail of the image after you’ve uploaded the profile picture. I hope that helps!
I feel they change this without letting many people know about it, 180 X 530 works well for all my images.
thnq so mch ..i badly needed it
It doesnt work when I try to change my thumbnail.
When I drag it, the picture doesnt move and nothing happens when i click scale to fit.
How can I fix this?
ohk…my cropping is really wierd….doesnt work on IE and doesnt deselect on chrome…..#whattodo?
how can i use that….
May I CUT A PICTURE, how II can do it?
I would like to post a picture in Facebook, but they doesnt accept this. What can I do?
We were having difficulty fitting a rectangular shaped logo image, as well. As someone mentioned before, it seemed to be all about the canvas size in our situation. We didn’t redo anything with the “image size” just the “canvas size”. If you go into Photoshop (or other image editing software) and resize the canvas, save it, and upload to Facebook for your profile picture, it should work. We ended up doing 1200×1000 pixels (you can do by inches also) for the canvas and now our logo looks great and not distorted on Facebook. Ultimately, the pixels/size of canvas you choose has to work with your particular logo and Facebook with convert it to their specs. But if you have a more square canvas to start with it helps a great deal. Yes, there is a little more white area on top and bottom than we want, but the logo & tagline aren’t cutoff now.
Thanks for the good tips.
I wanted to size my Facebook Page picture. Can you suggest what could be the perfect size for picture so it doesn’t starched.
The question is how to change app thumbnails on a profile, not a page. This is the question which I and 1,000,000 other users have and no pne answers. All the answers are just pages, not individuals.
Hi John,
I totally understand your frustration. There’s not too much info out there for customizing personal Facebook profiles (and even this blog is more geared toward bloggers and businesses with fan pages). But I’ve answered your question in this new article: http://ustandout.com/facebook/change-app-thumbnail-personal-facebook-profile. I hope that helps!
Thanks for reading!
Diana
I found this very useful and easy to follow. Thank you
Thank you so much for this article…I’m just starting with facebook and find it somewhat ambiguous and a little disorganize compare to wordpress or joomla cms….With help like this, I can probably slowly make sense out of it…
Thank You!
Diana – a crucial piece of info that is missing above is the CANVAS size when you are using an editor! I tried a couple of times trying to get my image to be exactly 200 px wide with a 12 px border. but when i uploaded the image, it didnt work.
what worked? Starting with a canvas size that was exactly 200 px square. then importing our logo onto this canvas and adjusting the border. I think someone else also mentioned this in the comments.
This was a good inputs from your end.
Thanks for the tips! I am finding the new time-line very frustrating and am hearing users don’t like it much either.
actually I tried several different sizes and fb categorically reconfigures the look no matter what. i used photoshop to reduce the image size, saved it as a jpg, then a gif, then a png – no matter what, fb decides what and how it will depict my logo. supposedly i can adjust the thumbnail. i do – it looks fine for 2 seconds in their preview, then reverts to a portion of the logo. their specs and countless forums give varying info – none have yet to work.
I want the pictures of flowers and beautiful sceneries
how ya size of Facebook Profile Picture for april 2012 instead of this? anyone can help?
These instructions have been updated for the new Timeline pages, so will still work!