Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

In this article we will go over the image specs for your Facebook Fan Page and Group Page. This easy guide will include a template download that you can use to make sure you create your graphic for the best results. 


Intro To Facebook Marketing Strategies

This tutorial and others to come will help to guide you with strategies for marketing on Facebook. One of the first things of importance when visitors come to your Facebook Fan Page is the header graphic at the top of the page. Facebook Fan Page Header Graphic Tutorial Facebook Fan Page Header Graphic It is important to make your header graphic look right. Unfortunately, there is a lot of bad information out there. If you are reading this, chances are that you made a graphic according to specs you were given online and when you uploaded it you found the graphic did not look right. Additionally, it may have had parts of it that were cut off or the picture resolution was off a bit. This guide is to help you have the correct ratio and understanding to help you create a better header image for your Facebook Fan Page. Also, a different option for your header graphic would be to insert a video file. We will cover creating a video header for the Facebook Fan Page in a separate tutorial.

Fan Page and Group Page Specs

The Fan Page and Group Page graphics have a little bit different specs. In this tutorial we will cover both versions and later in this article you will be provided with a download link for each one. Facebook Fan Page And Group Page Header Specs Facebook Fan Page And Group Page Header Specs

The Fan Page Header Graphic Template

The Fan Page header graphic is 820 by 461 which is a 16:9 ratio. However, I recommend using 1200 by 675 which is still a 16:9 ratio and this makes it easier for more editing and getting more intricate with your design. I have created a template as a guide to help you understand how to create the graphic so that it will work well both for desktop visitors and mobile visitors alike.

Facebook Fan Page Template Graphic Facebook Fan Page Template Graphic The Fan Page and Group Page headers are both 16:9 ratio but as they are two different sizes. I will provide you with a separate download for each template. You will notice that this template is labeled Fan Page.

Making The Fan Page Header Graphic

For the Fan Page you want to make the graphic 1200px wide and 675px high for the over-all size. "<yoastmark Take note in the image below of the bright green arrow on the left and the greenish blue area going across the image that reflects that height. That is the part that will show on the desktop version of your Facebook Fan Page. Facebook Fan Page Desktop View Size Of Header Graphic Facebook Fan Page Desktop View Size Of Header Graphic As indicated on the right hand side of the graphic with the white arrow you can see that the mobile version of the graphic will show the entire thing. Make sure that you keep to the 1200 px width so that you do not have any problems with cropping or cutting off of your graphic.

Examples Of Cut Off Graphics

If you look at my graphic below you will see that my header graphic was cut off on the right side of the screen. Example of fan page header graphic cut off Example of fan page header graphic cut off Here is an example of the same graphic only through a mobile site tester. You can see how the header graphic is cropped off from both sides on the mobile version. Example of fan page header graphic cut off on mobile version Example of fan page header graphic cut off on mobile version The reason for this is that I originally used misinformation from the internet that did not provide proper details for creating the graphic to be mobile friendly.

Understanding The Fan Page Specs

Download the Fan Page template HERE. If you would like to create your own on Adobe Photoshop you can do that also by understanding the specs for the Fan Page. Follow these steps:
  1. Start by opening up your Photoshop program and clicking New under the File menu
    • Open Photoshop and go to File and New Open Photoshop and go to File and New
  2. Select Custom Size and set the width at 1200 px and the height at 675 px
    • In the Photoshop pop-up select custom size and set your width and height In the Photoshop pop-up select custom size and set your width and height
  3. You will see other options in the preset settings. Set the Orientation  at landscape, the Resolution at 72 Pixels/Inch, the Color Mode at RGB Color 8 bit and the Background Contents sets at White. Then click Create.
    • Reviewing Other Photoshop Preset Settings Reviewing Other Photoshop Preset Settings
  4. If you have downloaded the template you can simply go into Photoshop and click File and Open and open the downloaded file. Now you are ready to create your Fan Page header. In the Downloads section of this post I have included links for both the PNG file and the Photoshop PSD file for the template.
    • Open the template file you downloaded in Photoshop Open the template file you downloaded in Photoshop

Creating The Facebook Group Page Header Graphic

Next is the Facebook Group header graphic. The specs for the Group Page header is 1640px by 859px which is a ratio of 1.91:1  The template that I am providing is 1640px by 923px of a ratio of 16:1. In this image below, the white section on the top and bottom gets cropped off. "<yoastmark The over-all size of the Group Page header is 1640 px by 923 px. The white arrow shows the mobile view from the blue top to the blue bottom. The green arrow shows the desktop view with the greenish blue area. You can see that the Mobile Group Name is where the name of your group is going to show over top of the graphic when you are on the live version and where you see Desktop Group Name is where your Group Name will show over the top of the graphic for desktop users on the live version. Here you see how this is shown for A1WebsitePro's group page visitors that are on a desktop. Notice that it just shows small text over the graphic that states Group by A1WebsitePro. Group Page Header Live Desktop Version Group Page Header Live Desktop Version And here you can see how the mobile version varies a little bit from that in the way that it shows two different lines. Facebook states the actual Group Name followed by smaller text that lets visitors know the group status whether public or private. Group Page header live mobile version Group Page header live mobile version As a matter of fact, keep that area in mind as you create your graphic. Do this if you have text you want to be visible so it does not get covered up. Finally, you will notice that in both images my full picture is visible. The magic of getting this to happen is to pay attention to the ratio. Use the template to save yourself a lot of time, effort and editing trying to make your graphic fit properly. That way it shows as you want for all of your visitors.

DOWNLOADS:

Here are some files to help you out. We have a basic PNG of each template and the Photoshop PSD file with the layers if you prefer. We hope that this tutorial has been helpful. Subscribe to our feed if you would like to know when we have additional posts available. 1. Facebook Fan Page PNG 2. Facebook Fan Page PSD 3. Facebook Group Page PNG 4. Facebook Group Page PSD

16:9 Aspect Ratio Settings

1920 x 1080 1904 x 1071 1888 x 1062 1872 x 1053 1856 x 1044 1840 x 1035 1824 x 1026 1808 x 1017 1792 x 1008 1776 x 999 1760 x 990 1744 x 981 1728 x 972 1712 x 963 1696 x 954 1680 x 945 1664 x 936 1648 x 927 1632 x 918 1616 x 909 1600 x 900 1584 x 891 1568 x 882 1552 x 873 1536 x 864 1520 x 855 1504 x 846 1488 x 837 1472 x 828 1456 x 819 1440 x 810 1424 x 801 1408 x 792 1392 x 783 1376 x 774 1360 x 765 1344 x 756 1328 x 747 1312 x 738 1296 x 729 1280 x 720 1264 x 711 1248 x 702 1232 x 693 1216 x 684 1200 x 675 1184 x 666 1168 x 657 1152 x 648 1136 x 639 1120 x 630 1104 x 621 1088 x 612 1072 x 603 1056 x 594 1040 x 585 1024 x 576 1008 x 567 992 x 558 976 x 549 960 x 540 944 x 531 928 x 522 912 x 513 896 x 504 880 x 495 864 x 486 848 x 477 832 x 468 816 x 459 800 x 450 784 x 441 768 x 432 752 x 423 736 x 414 720 x 405 704 x 396 688 x 387 672 x 378 656 x 369 640 x 360 624 x 351 608 x 342 592 x 333 576 x 324 560 x 315 544 x 306 528 x 297 512 x 288 496 x 279 480 x 270 464 x 261 448 x 252 432 x 243 416 x 234 400 x 225 384 x 216 368 x 207 352 x 198 336 x 189 320 x 180 304 x 171 288 x 162 272 x 153 256 x 144 240 x 135 224 x 126 208 x 117 192 x 108 176 x 99 160 x 90 144 x 81 128 x 72 112 x 63 96 x 54 80 x 45 64 x 36 48 x 27 32 x 18 16 x 9

Thanks For Reading!

We appreciate that you took time to read our post and hope to see you back. If you have any comments or questions or need any other Facebook tutorials, please let us know by leaving a comment below or contacting us through our Contact Page.