Adding Logos, Logo Sizing & Settings
There is no specific size or even a universally recommended logo size for your site, simply because each logo is unique and can be quite different in terms of placement requirements. In the following article we will recommend some guidelines for uploading logos, and in the video show you how to upload your logo and any logo settings.
Adding a Logo
Adding a logo to your site is simple. We recommend using a .PNG image with a transparent background. Make sure to optimize the image for web and export is at max width 500px, more details on recommended sizing below.
To upload the image, go to one of the following areas, depending on your theme this will differ:
- Flothemes > Header > Desktop Header > Logo Options
- Flothemes > Header > Desktop Header Layout > Desktop Header Options
Then choose the option for image logo, and upload both a dark and light logo, we recommend using photoshop to invert the colors if needs be (depending on your logo, you may not need to do this).
Logo Sizes and Options
1. Make sure your logo is uploaded as a .PNG image with a transparent background. Do not use any .PSD .AI or any other original design files.
2. Max width 500px – keep the max width under 500px.
3. Make sure your logo is easy to read
4. Make sure your logo does not push other menu items out of place
5. Make sure your logo is not pixilated.
Normally this happens if your logo is not the right size when uploading.
6. Make sure your logo does not exceed 150 KB in file size.
Keep your logos file size as small as possible. If exporting at max width 500px it should be under 150kb. Use tinypng.com to optimize it further.
Adjusting Logo Width
You can adjust the Logo width on Desktop and Tablet devices in one of 2 places:
- Flotheme > Header > Desktop Header Options
- Flotheme > Header > Logo Options
Find the Logo Maximum Width and Logo Width for Tablet, move the slider to adjust the size.
Also, be sure to check out our detailed tutorial explaining all the logo options including Logo sizing, Logo font and color adjustments, changing logo color over slideshow images, etc.