What’s the Best Size for Your Logo?
Here are 7 Web Designs to Help You Decide
Honestly, your logo can be any size you want. As long as it’s right. As long as your objective for the web design is achieved. As long as it doesn’t compete with your main marketing message.
How do you know the right size for the logo in your web design? Let’s look at seven different homepage web designs. Each one handles this question a little differently, but they can be broken down into three sizes: large logo web designs, medium logo web designs, and small logo web designs.
By examining web designs with different logo sizes, you’ll see how each size option contributes to the overall objective. When you’ve seen them all, you will be ready to choose a logo size to help you achieve your web design goals.
Protect Your Brand
Your brand is more than just a logo. Assemble all your brand assets in one kit.
Large Logo Web Designs
You may have seen hip websites that feature full-screen photographs with a really big logo. Or maybe the logo is blown-up and centered over the top of the navigation bar. Why so big? Check out these three web designs featuring plus-size logos.
What is that thing in the middle there? I’m not sure. And I don’t read Dutch, so I may never know. But this website for the Rotterdam Philharmonic Orchestra is heavily layered with design elements drawn from their new logo. The logo itself is medium sized, chilling out in the left corner. But its container shape (that wavy circle thing) is used repeatedly to frame photographs and headlines.
They’ve done a great job keeping the focus on their main message while still making everything feel branded and integrated into the design language established by the logo.
Another trend you may have seen before is the welcome mat or cover page. It acts like a glossy magazine ad to firmly establish the brand identity and set the scene for other content published on the site. Rubschlager prepared for their new web design by commissioning artists and food designers to produce rich, dramatic photography. This gets its full expression in the website cover. The rest of the site elements are actually minimally designed, like the interior pages of a book.
Visit rubschlagerbreads.com and scroll down to see how the logo display changes once you move on from the cover. It shrinks as it moves into place, centered with the main navigation.
Another straightforward option is to center your big logo on top of the main navigation. In this application, the big logo gets right in your face. Everything about the branding for the Sydney Dogs and Cats Home is bold, like a LOST CAT poster on a telephone pole. A sweet and playful icon system balances the high-impact type in the logo.
But the main message gets even closer. Puppies with those limpid, liquid eyes. A cat named Harriet who does not care (but secretly cares a lot and needs a home). Those homepage photographs tug at your heart. And just below is their unique positioning, stated boldly and all-caps, equally tall as the logo. It’s kind of perfect.
Medium Logo Web Designs
Super-big logos are not for every company. While I consider large to be something like over 1000 pixels wide or over 200 pixels tall, medium is more like 300 pixels wide or 75 pixels tall. These brands are in the medium category because the original design of their logos stacks elements for a taller layout. This often happens when the business name has more than three words.
That B is huge! And it’s got ears! The words “blue” and “bunny” are stacked to interact with the stylized B for a clever play on words. But that means the logo is tall. Notice the thick lines composing the words. This also requires the logo to be shown bigger. As you shrink the Blue Bunny logo, the letters get harder to tell apart, because the negative space in letters like N and U start to disappear.
Like with Sydney Home for Dogs and Cats, everything else on this site is quite big. Headlines, design elements and body copy are all larger than normal. Part of it is the kid-friendly, quirky branding. Part of it is to be heard above the logo.
This is another brand with stacked elements in their logo. There’s also a fairly detailed icon to go with it. All of which means the minimum height for this is 75 pixels. Less than that, it’s hard to see.
Once again, the main message is typed in a font size larger than the logo. But it’s not a problem. Even a medium size logo must serve the main marketing message.
This website also includes special headline sections on interior landing pages that overpower, but don’t drown, the logo itself. That’s the way it should be. Your logo is not as important as the message you want to send.
Small Logo Web Designs
Here’s where things get interesting. What about tiny logos? You know, those logos where it’s just a little icon in the left corner, no name or a minutely small name that just looks typed out. These are my favorite. They assume the best of your visitor, that your visitor is smart and knows where they’re at and the rest of your branding is working to wrap the visitor in a consistent experience without smashing the logo in their face.
What’s interesting about Magic Johnson’s site is the age of the branding. It’s clearly an older logo, not bad, just over-detailed in a way that doesn’t jive with the flexible design requirements of digital marketing. But the site is exceptionally modern and really well done.
They’ve decided to give up some of the legibility of the original logo to press it into a color block in the far left. It’s maybe a little too small. But a good example of the compromise between smaller-is-better in website logos and the requirement that the site use this older element.
The Uber logo is eency-weency. I say that with the utmost affection. It stays right out of the way, letting an impressive video do the hard part of educating customers and making their car-hailing app feel normal. All those smiling, happy Uber riders! The video makes me want to download the app and give it a try, even without a destination in mind. The “Start riding with Uber” CTA is right at hand.
Notice how none of this customer goodwill has to do with the logo? Uber’s telling a story about everyday people, getting around quickly and easily with their service. It’s about more than the logo.
Bonus Web Design Advice
Large logos are not the right fit for most web design projects. Very rarely do you see established businesses opt for over-sized logos. it’s a distraction. Visitors probably already know you. The logo’s main purpose is verification that they’re visiting the right address.
If your logo is tall by nature, like Blue Bunny or The Catherine Peachey Fund, you’re not wrong if it “looks big” or takes up a lot of room in the header area. I love both of those sites. However, you might consider using a smaller variation made of a single letter, the acronym or just the icon from the logo.
If your logo is following the smaller-is-better trend already, simply make sure it can be read or recognized easily. Then, next time we meet in person, remind me I owe you a fist bump.
Whatever you do with your web design’s logo, don’t overwhelm the main marketing message. Brand awareness is not a marketing objective. Think bigger and make your logo smaller.