Karen Vollaire

24 May 2024

About the author

With a background in creative and digital arts as well as social media marketing, Karen's strength is combining strategy and creativity to build beautiful search engine optimised WordPress websites.

View full profile

Share this page

Sizing multiple logos uniformly for a website carousel or grid

Tutorials

This tutorial covers sizing multiple logos uniformly for website use, so that carousel or grid logo displays are neat.

Why do we first place logos on the same size canvas before displaying them together on a website page?

When working with logos from different sources, designers, and formats, you will find that some logos were saved with solid backgrounds and others with no background (transparent). Some logos will have lots of space around them and some will not have any. Logo format will vary too: some will be square and constrained by the height of their container, while long skinny logos (landscape) will be constrained by width. Logo carousels and grids look untidy if the background and spacing around each logo is not uniform.

Steps to creating neat logos for a website logo display

Select a background style for all your logos (solid or transparent). In most cases, we recommend placing logos on a white background so that all are equally as easy to read.

Select a canvas size for all logos to be placed on, for example, 300 x 150 px.

For each logo, create a canvas, and place the logo in the center, making sure that all square logos are sized at the same height, and all landscape logos are roughly the same width.

Save each logo separately.

Sizing logos in Canva

Even if you don’t have graphic design software, you can accomplish the above tasks using the free version of Canva.

1. Log in to Canva.

2. Click on the ‘Create a design’ button (top right)

3. A pop-up will appear. Select ‘Custom size’ (bottom left).

4. Enter your canvas size and then click on ‘Create new design’.

5. Your blank canvas will open. Click on the ‘Upload’ option (far left vertical toolbar), and then click on ‘Upload files’ to upload your logo.

6. Drag the logo onto the canvas.

7. Center and size the logo.

8. To download your logo, click on ‘Share’ (top right), and then from the pop-up that appears, click on the ‘Download’ option.

9. In the download pop-up, select PNG as the file type. PNGs are sharper than JPGs and therefore work better for images with text. Click the ‘Download’ button to download your new logo.

TIP: Name the logo before uploading it to the website, then you can just copy the filename that WordPress places in the ‘title’ field and paste it into the ‘alt text’ field.