Cover Photos Part 1 – Facebook

While setting up the Ohio Divide Consulting page at Facebook, I needed to set a profile and cover photo.

Following Brian‘s advice to establish a consistent identity across the Internet, I chose the Ohio Divide Logo as the profile photo.Ohio Divide Logo

For the cover photo, I decided to duplicate the header from the Ohio Divide Web site.

Using the template from Facebook

CoverPhotoExample

I created this image

The resulting combination looked like this

Facebook PC snapshot

which was all well and good until I viewed the site on my smart phone and it looked like this

Facebook Phone Snapshot

A quick calculation shows that the cover image used on phones is created by scaling up the standard cover photo by eight sevenths then center cropping to 640 pixels wide.

Reversing the calculations shows that from an 851 x 315 pixel cover photo, the middle 560 pixels are used, as shown here

Facebook Cover Composite

Using this information, I created a template which combines both the standard and mobile rendering of the cover and profile photos

Facebook Cover Composite