A New Look
As we all know, Facebook often makes changes to it’s user interface. It can be a hassle to continually update your page, especially if you need it to fit a certain specification, but I thought I’d offer a few pointers to help you stay on track.
If you haven’t upgraded your page to the new timeline, I suggest doing so. It will take some getting used to, but I think it offers much more visibility and flexibility. Following the milestones on the timeline can be a bit confusing at first, but today I’m just going to focus on the cover and avatar images.
Your cover image is 851px x 315px. I’ve read a lot of places it’s 851px x 314px, but after a little research, I found out that Facebook adds 1 pixel at the very top of your cover image. Therefore, the actual visible space is, 851px x 314px, but in reality an extra pixel in your design is masked. Below are the dimensions of the cover image.
- Cover Image Size (Physical Dimensions): 851px X 315px
- Cover Image Size (Visual Dimensions): 851px X 314px
The avatar was 125px x 125px, but has recently been changed to 160px x 160px. It’s nice to have a little more visibility, but I’m sure those of you who designed for 125px x 125px were kind of frustrated of the unannounced change. Especially if your design is seamless and you need all the pixels in your avatar to line up with your cover image.
Facebook suggests that the image be 180px x 180px, and if it’s below that it will resize it to 160px x 160px. A little trick that works for me was just using an image of 180px x 160px and just pasting your avatar in the center. This tells Facebook it’s 180px and it won’t resize it, which could shift your pixels if you’re trying to align them with your cover image. Too bad we can’t just maneuver the avatar image like we can the cover image to place it where we like. I guess that would be too easy. Anyhow, here are the dimensions for the avatar image.
- Avatar Image Size (Recommended Physical Dimensions): 180px X 160px
- Avatar Image Size (Visual Dimensions): 160px X 160px
Putting it all together
Seems like a lot of work and technical specs just to make a decent looking cover and avatar image, doesn’t it? Well, what I did was just copy a page and make a template. That way I can see how it looks while I’m designing it. One done, I just copy each layer (cover and avatar) and save them as individual files, then upload them to Facebook.
Here’s what my template looks like. Feel free to download it and use it yourself. If you have any questions or need some help figuring out which design is best for your page, submit a comment and I’ll offer some suggestions.
Download the Facebook timeline template for cover & avatar images (Photoshop .PSD):