A website is one of the first and most important places your logo will live. To do your brand justice, you’ll want to display it proudly and avoid common logo fails, such as the logo appearing too small, too big, blurry, or cut off.
Start by thinking about some of the websites you visit every day — Netflix, Google, Amazon, Facebook, even your bank — and you’ll notice something similar: logo placement.
On all these websites (and thousands of others) the company’s logo is in the top-left corner, doubling as a clickable button to bring you back to the homepage.
While the left corner has become a standard logo placement design choice, you’ve probably seen logos in two other places on a company’s website: centered and — in much fewer cases — in the top right.
Despite the surge in mobile-first website design favoring centered logos, and the desire to try a right-aligned logo, both research and tradition support the case to lean left. Let’s take a closer look.
The Appeal of the Left-Aligned Logo
The popularity of a company’s logo displaying in the top-left corner of a website isn’t a fluke — it’s been the trademark placement since the dawn of the Internet.
Why? We automatically look to the top left when searching for the homepage button. And for those of us who read our native language left to right, that same instinct kicks in when browsing a website.
Research by Nielsen Norman Group found that centered logos can hurt website navigation. The user experience experts discovered that returning to a site’s landing page is six times harder when the logo is in the center of a page instead of the top-left corner. That’s significant!
Nielsen Norman Group also found that users are 89% more likely to remember your brand if your logo is in the traditional top-left spot on your website compared to the right.
If you’re determined to have a centered logo on your website, don’t worry — it can still be done. Make sure it’s paired with a simple navigation bar that allows the design to shine, as seen on Ollie Quinn.
Avoiding Common Logo Fails on Websites
Once your logo is in a prime spot on your website, there are a few common design mistakes to watch out for that can negatively impact your brand.
When it comes to logo placement on a website, these elements may seem trivial. However, they can have repercussions on your bottom line if potential customers click away from your site (or fail to remember you).
Fail #1: Logo is too small
If your logo is too small, someone visiting your site may not be able to distinguish your logo elements at a glance or read your company name.
With this yoga website, we see what can happen when text within a logo gets lost when the design is scaled down.
To avoid legibility problems, consider using a symbol-only version of your design on your favicon and any smaller places where your logo shows up.
Standard logo placement rules call for a logo that’s larger and more prominent than your navigation menu, so it stands out in your website header. You don’t want users drifting to the top menu before acknowledging your brand and remembering where they are.
No matter what website platform you’re using, you can learn how to swap out standard header text for a clickable logo that leads a visitor back to the homepage.
Instructions for adding a logo to your website will depend on the platform you’re using to build it. For example, Squarespace has step-by-step logo placement guidelines showing users how they can upload a logo image to appear in the place of a site title.
Fail #2: Logo is too big or repetitive
On the other end of the spectrum, you can also run into issues if your logo is too big.
A large logo can occupy so much prime real estate that other branding elements and navigation items get lost. It’s also possible that your logo is unnecessarily used twice in the “above the fold” portion of the page, as seen on this university website.
Think about visual hierarchy. Ask yourself, what else do I want to be in the top fold of the website? What do I want my visitors to know first?
Another design option is a “sticky” website header. The logo appears one size when a visitor first lands on the site and shrinks as you scroll down the page (but remains visible at the top of the page, hence the “sticky” name).
Fail #3: Logo doesn’t stand out
If your logo color is similar to your website theme, it could get lost in the background. On the homepage for The Well of Alternative Medicine, the company’s logo is too large and doesn’t stand out against the colored background. The slogan also gets lost because it’s on a different background.
Remember that your logo needs to shine here, so don’t place it on top of colors where it doesn’t stand out. (Brand guidelines can help you avoid this.)
Choose secondary colors for your theme that make your design pop, and test the different color options in contrast to your theme: full-color, black, white, and even inverse.
Tip: Create or request different color variations of your logo to avoid having a light logo on a light background or a dark logo on a dark background. (Logojoy’s Premium Package includes versions of your logo on a transparent background, as well as black, white, and colored variations.)
Fail #4: Logo is blurry
Don’t overlook the quality of your logo’s image file. If it’s not the right size, your logo may become pixelated when scaled. That may also mean your logo text isn’t legible — a huge no-no. You’ll want to test the logo at different sizes to double-check that your company name remains readable.
A surefire way you can avoid a blurry logo is to use a PNG file type instead of a JPEG. Why? With a JPEG file, image information is tossed when the file size is reduced. But with a PNG, you don’t have to worry about seeing a change in quality when scaling the size up or down.
Look at how crisp this example from Blue Apron is — beautiful!
Fail #5: Logo looks inconsistent across devices
Whether someone is pulling up your site through a Google search on their laptop or clicking on an Instagram link from their smartphone, you’ll want your website to have a responsive design that maintains the quality and appearance of your logo across all devices.
MaRS shows us what happens when you nail a layout for desktop and mobile. Good job!
Thankfully, WordPress and Squarespace allow you to preview how your site appears on mobile, tablet, and desktop screens.
Remember to keep a close eye on logo alignment, whether it’s left justified or centered in the header. You’ll be able to immediately see if the design is delivering your vision and quickly make changes.
Fail #6: Logo is cut off or easy to miss
While it’s important to consider placement and colors, your logo must also adequately represent your brand on your website and help visitors navigate back to your landing page.
Make sure your logo isn’t cut off when you put it in your website header — a mistake we see in the example below— or placed so close to the margins that it doesn’t look quite right.
In the example below, the juice brand’s symbol-only logo would pop more if it was larger and had extra padding.
More Website Logo Tips
- Apart from a header logo, think about adding your logo elsewhere on your site. You can reinforce your brand in the footer, product photos, and as part of the checkout experience if you’re running an ecommerce site.
- It’s also a good idea to incorporate your brand’s colors (as seen in your logo) in other areas of your website, like call to action buttons, text, headlines, and backgrounds.
- If you don’t have brand guidelines or a logo package yet, you can still win at online branding by being consistent across your website and social media channels.
The task of putting your logo on your website may seem simple. But it often requires time and experimentation to get it to look just right. Don’t rush it!