What size should a website logo be?

If we had £10 every time someone asked me to “make their logo bigger” I’d be rich by now. Bigger isn’t always better and smaller isn’t good either, so how big should your logo be?

The short answer, for the majority of websites your logo display size should be a maximum of 280 pixels wide and 60 pixels high and a file size of around 50kb or lower. As most people use retina screens, we recommend the file itself is actually 560 pixels wide by 120 pixels high so that it remains crisp on retina devices.

The long answer is… it depends. Let me explain a bit more on how to get the right logo size for your website.

Ratios

Firstly, let’s take a look at your logo ratio, is your logo wide and short (14:3) or is it an even height and width (4:4) or… somewhere in between?

If your logo is wide and short, this is usually referred to as a horizontal logo. This could be just a wordmark…

… or a logotype…

… or a logomark + wordmark…

If your logo is even in width and height or more portrait than landscape, this is referred to as a “stacked” logo where you typically have the logomark up top, then your brand name and sometimes a strapline too.

Logo Variations

Whenever we create brands for our private clients, we always create logo variations. As you probably already know, a website header is typically a thin sliver at the top of your webpage, so it doesn’t have much vertical space (height). This can be problematic if all you have is a tall logo as it’ll get smushed too small or make the header much too tall…

So when we create logos, we always provide a website header size logo in a horizontal format. Depending on the brand, we’ll also create a stacked version, a logo mark / avatar and a wordmark / logotype version. As you never know how the brand and logo will be applied in the future.

Readable text

We also recommend that if you have text on your logo, that the text is all readable at a smaller scale. It’s no good having a strapline you can’t read when things go small…

And in fact, if your designer has done their job right you’ll have a version of your logo without the strapline anyway.

Logo placement

Depending on the logo (and your website) you don’t always have to follow the “logo left: navigation right” approach, you can centre a logo in your website header. Perfectly round logos or simple logomarks work really well in the middle of a menu, but only if your menu separates into evenly spaced items.

Logo Details

For us, the best logos are simple, clear bold logos without too much intricacy and without any background washes. These are the logos that stand the test of time.

If you do want to use a logo with overlaid text over a brush stroke, or intricacies that look great at larger scale, you should still have a simplified version for black and white usage and small scale usage, i.e. your website header.

File size

This can vary and obviously the smaller the better. If you’re using a transparent PNG file for your logo, under 50kb is a good file size to aim for. If you have a simple, line, word, or shape based logo an SVG file would be a better option and would lead to a crisper looking logo and usually a smaller file size (under 10kb).

Any other sizes you need?

We also recommend you have a logo or logomark, or a definable brand mark that will fit into a square avatar. This will work well for all social media avatars and also your website favicon and smart phone app icon.

Leave some space around the edge of your logo for this file type, around 30-40 pixels and make the square 512 by 512 pixels.

There’s a lot more than goes into a brand than just the logo

Finally, it’s worth saying that having a logo is great, but that it is only part of your overall brand. If you want people to take your business seriously and also make sure you’re consistently applying your brand across all media, we recommend you having at a minimum a colour palette, a logo with variations and two brand fonts.

If you’d like to discuss your branding needs, feel free to get in touch on our contact page.

If you’re doing it yourself or hiring someone to do it for you, we also recommend checking out our free Brand Checklist.

Featured Image by Slidebean on Unsplash