SocialMedia header image optimization

Every social network has its own individual, unwritten rules. For many projects, products and services, it is worth thinking about the cover images in social media marketing. They give the visitor uncomplicated and direct information about their own social media channel. On Facebook this could be a current action, e.g. an open day, or even a raffle, on YouTube it is usually the announcement of new YouTube videos, as regular as on classic TV, every Friday at 5 pm. On Twitter, the channel images are usually equipped with little information. Let’s take a look at all the networks in comparison today. Remember to also optimize cover images for your social media channels.

Header image Facebook

The Facebook header picture contains all important information about the channel. Often not only a photo of the channel operator, the brand, or the group, but also text information is often packed here. Especially when it’s no longer just about private channels, but about fanpages of companies, products and services.

The Facebook cover picture is not only displayed on the computer, notebook and tablet, you can also see the header picture on the smartphone. Therefore it is suitable very well to place information to the own channel, or company. The header image has a very good presence due to its placement on the start page and is therefore frequently called up by the users.

The format of the Facebook title pictures has changed relatively often. Usually every 2 years design optimizations were made by Facebook.

Current Facebook cover picture Dimensions

• 820 x 312 pixels on computer and notebook
• 640 x 360 pixels on the smartphone, default
• At least 400 x 150 pixels for usage

Header image YouTube

The YouTube cover picture is located on the homepage of the YouTube channel. Thus the YouTube cover picture is just as present as with Facebook and can be used accordingly also for the own graduation. However, YouTube’s header image is most often used by people and companies to make announcements in their own sense. Usually these are announcements of new releases of videos. On YouTube, regularity is a very important factor and indicator of success. A bit comparable to the classic TV, the more regular the broadcasting times are, the more the viewer gets used to the times and switches on automatically. So that visitors know immediately when new videos will appear, the dates are announced in the respective header picture. In addition, there is usually an image of the YouTuber itself, which again increases the recognition value.

The YouTube title picture is output in various formats. The largest format is required for Smart TV. A little smaller, the edges are trimmed, is the header image for computers and notebooks. On the smartphone, the size of the header image depends on the individual screen size. Responsive design does not only play an important role in the development of websites, but also in social networks the respective sizes and the value of the images adapt to the end device.

Current YouTube cover image Dimensions

• 2560 x 423 pixels on computer and notebook
• Of which 1546 x 423 pixels are safely visible on computer and notebook
• 2560 x 1440 pixels maximum size on Smart TV
• Smartphones are dependent on screen size

Header image Twitter

The header picture on Twitter is drawn crosswise in the upper part and relatively narrow. The header image on Twitter is mainly displayed on notebooks and desktops.

The Twitter image usually contains little information, it is usually an image of the channel owner with a maximum of some information, e.g. on the topic. Unlike the header picture on Facebook and YouTube, more information is rarely packed here. Why is that? Twitter is a very fast network with a lot of information, there are no regular times here, because a lot of content is spread throughout the day. Unlike e.g. YouTube, which often refers to the regular publication, e.g. on Friday at 5 pm.

Current Twitter Cover Picture Dimensions

• 1500 x 500 pixels recommended for all devices

Facebook Fanpage Design

For beginners, I will describe the use of the template in detail again in steps 1-8. The download of the free Photoshop template (PSD) can be found at the beginning and end of the article. If you don’t feel like reading, you can also watch the Facebook Fanpage video tutorial or read the written tutorial below. The download is directly below the video.

In a few steps you will learn how to create your own individual design and look professional – even without an extra design agency. You can download the free layout package here:

Download > Photoshop (.psd) template for Facebook Fanpage Design
/ zip archive

Create Facebook fan page design

INSTRUCTIONS FOR 2014, DOWNLOAD CURRENT! PRINCIPLE IS THE SAME!

Facebook fanpage designs are something special: They include the Facebook fanpage banner as well as the matching profile picture of your fanpage (Facebook internal company or project page). We as a creative and corporate design agency in Cologne design for numerous customer projects, whether in Hamburg, Munich, Düsseldorf and Hannover. We always pay attention to current dimensions, which are given by the company Facebook for the design of the fanpage, but also to smooth transitions (!) between the two graphics. Only smart layouts make these visual transition effects possible. This is how you stand out from the broad mass of Facebook fan pages. Your possibilities are as follows: You can hire a designer or you can design your own (or have your employees design). We provide you with the current layout package of our media agency free of charge! Including Facebook fan page banner and profile picture.

Instruction – Facebook Fanpage Design Tutorial in 4 steps:

The change is minimal. The profile is a bit more to the left than before. To save you time I created a Photoshop design template in university. Here you can easily insert existing graphics and save them 1:1. A small tutorial and the download can be found in the following article. I would be happy about some Likes and nice recommendations!

Step 1: Open Facebook graphic layout in Photoshop and start design

The PSD is 2x as large as needed. Why? This way you won’t have any problems with the profile image, which is larger than the actual pixels displayed. Put your images in the designated folders (title, profile). Hint! As marked as “EXAMPLE” in the template, connects the background layers of the profile and title picture. This way the transition is kept clean and you can move the background around freely and easily.

Step 2: Disable preview level

To save Facebook profile and cover image first deactivate the top level “profile image – shape”.

Step 3: Select and release masks

Select the masks of the two folders (title, profile). Simply press ALT + mouse click (on the mask). Change back to the normal view and crop the image (Edit > Crop). This way you have the original dimensions. Remember: title image must be (min.) 830×315 pixels and the profile image (min.) 180×180 pixels, but the display is limited to 160×160 pixels.

Step 4: Save and upload

Save your picture as a .jpg with quality level 10, 11 and then upload your new profile and title picture to the Facebook Fanpage.

Download ‘Fanpage Design’ template (Photoshop)

Download > Photoshop (.psd) template for Facebook Fanpage Design
/ zip archive

Update! Feedback from a reader:

Is your PSD template still up to date for the new fanpage on facebook? (thanks!)

As the article says, no 🙂 Facebook has now separated profile + banner. So you don’t need an extra layout for your own Facebook channel anymore.