Choosing Store Header Images and Logos

This article describes best practices for selecting header images and logos for the Kano Store.

Overview

When setting up your Kano Store website, you can both add your brand logo to the site header and create a hero banner to personalize the site and create a cohesive look and feel. However, these images need to have the correct sizes and dimensions to ensure that they can seamlessly fit into the site. 

Contact your Kano Store Support Team to help upload your header images and logos. 

Header and Footer Logos

Your company logo will be visible on the site header and footer. Logos used for the navigation bar should be a maximum size of 200 pixels (width) by 48 pixels (height). If you provide us with a logo larger than these dimensions, it will resize accordingly. This is because the navigation bar itself has a height of 72px.

TIPS: Ideal Size: 200 pixels (width) by 48 pixels (height). For best results, use the cleanest, higher quality version of your logo. We recommend using PNG images as it can support transparency, although high quality JPG (JPEG) or GIF images are still sufficient to start with. Use a transparent version of your logo to prevent it from competing with its surroundings, or from standing out in an unprofessional way.

Hero Banner

A banner image displays near the top of the page, adding a visual element that also sets the tone for your site. The ideal size of a hero banner image is 1600px (width) by 500px (height). If you need crystal-clear images, or if your target audience browses on large screens, you may want to consider sizing up to 1900px. 

Sizing up however can result in a large image file that will slow down your site and potentially drive people away from your store. Thus, it would be ideal to optimize your image by reducing the image file size as much as possible, without sacrificing quality. The maximum file size is 2MB, but try to keep it under 1MB if possible. Third-party apps are available that can decrease image size without reducing quality. When compressing your image, ensure that you have the correct dimensions beforehand or the image may appear blurry or stretched.

TIPS: Ideal Size:  1600px (width) by 500px (height). Ensure images are wider than they are high. Do not use images with text in the actual image file. Instead, add text over the image.