Core Publisher: Image Specs and Best Pratices for the Header
Logo Image Best Practices:
- The optimal logo size is roughly 600x400 pixels, or close to 400x400 if you have a square-shaped logo. However, the header is flexible and can handle various sizes for both the background image and the logo.
- Ideally, your logo should be a transparent .png or .gif, which will enable you to place it on top of a variety of background images or colors. This may not be an issue right now (say, if your logo sits on top of a white background), but it's a good idea to be flexible enough to handle a variety of possible future conditions.
- Next, we recommend cropping the logo right up to the edge of the image without any extra margin or padding, which will help it display at a larger, more readable size on small screens.
- The logo goes into an area that has a maximum width of 204 pixels and a maximum height of 110 pixels. It will display as large as it can be within those constraints.
- Enter the header background color as a hex value (like #ffffff for white and #000000 for black). If you are not sure of the hex value for the color that you would like to use, use a free online resources like colorpicker.com.
- Ideally, your background image should be 1600 pixels wide by 155 pixels high, but you may not always have the perfect asset. As an example, let’s imagine you have this picture of a wave, below. It isn't a great size for the header because it's much too tall and it’s only 1024 pixels wide. By default, it will be vertically centered and displayed at it's natural size — not stretched to fill the background area. If you were to set the background color red, it might look like the example below on wide screens.
In many cases, an even better solution would be to make the image "scale-to-fit," which will cause the image to stretch and fill the entire header area, no matter how wide. The Background Image Size section of this tutorial (a little further below) explains how to do this.
- The Background Image Position setting gives you some control over which part of the background image is displayed in the header. For example, an image that's too tall, like our wave example, will display the middle part by default (see image below). Select top or bottom if you prefer those parts of the image.
Did you find this article helpful?