How to make your brand’s Twitter, Facebook profile pic work in new circle format
The change, which, as of this writing, affects the Twitter website and mobile app as well as the company’s Tweetdeck service, means that instead of the square shaped profile photos, both user and brand accounts now have a circular shape automatically applied to avatars.
Facebook also appears to be using the rounded shape in newsfeed icons on its mobile app, but not, interestingly, at the top of brand pages or anywhere on web version.
Both services are “forcing” all users into this new shape, so this means brands and individuals should check out how their avatars are rendering in the circular format and make changes, if necessary.
Essentially Twitter and Facebook are forcing profile photos to make use of a concept that should be familiar to most TV people — safe area.
However, unlike TV screens, this “safe area” is circular, as shown in the example with the NewscastStudio icon shown above.
It’s also worth noting that, if a user downloads a profile photo from Twitter, the image becomes square shaped — so you should consider making sure the design works equally well in both square and circle lockups.
This is also important given the inconsistencies between Facebook’s use of the profile picture.
In this post, we’ll take a look at some profiles as they appeared Monday morning for examples. Note, however, that it’s always possible some or all of these profiles may update or change their avatars.
In most cases, profile headshots are relatively “safe” — assuming that the face is centered both horizontally and vertically in the previous, square space.
One notable example, however, is if a profile photo includes a logo or icon, such as those of many NBC News personalities, which often include the NBC peacock in the lower right. Similar layouts are also used by many local station personalities.
In this layout, the peacock, as shown in Tom Brokaw’s profile above, gets awkwardly cut off.
The fix: Move the logo to the bottom center of the icon. It may be necessary to move it up a bit higher, depending on the exact size and shape. Other options include removing the logo altogether or creating a Twitter-only version where the logo is positioned within the circular “safe area.”