Best Practices: Integrating Your Logo Into Your Website

Companies spend years building a brand. Your logo is the face to go with your reputation. As such, it is critically important. But, how you integrate your logo into your website is unique and requires a different way of thinking.
Integrating your logo into your website.

Your website is an interactive advertisement.

Unlike letterhead or a business card, your website is less about brand and more about information. A good print ad, for example, focuses on the message. That is delivered through imagery and/or illustration as well as text. Your website should do the same thing, but with greater detail.

When we consider how to handle a client logo on a website, we think of it like a print advertisement or brochure. Our goal is to focus on the message not the brand. What do you want a customer to learn? What do you want them to do? They are interested in that message and you want to give it to them as efficiently as possible. Your brand mark, no matter how wonderful it may be, doesn’t say much about who you are and what you do. Your logo should pay its role, but in appropriate proportion to the rest of the information on the website.

How big/small is too big/small.

Speaking of proportions, one of the most common requests we receive when creating a website is to make the logo larger. This is treating your website like a business card. Not only is it redundant (your customer knows who you are because they clicked a link with your name in the URL), but it can draw attention away from the message. Remember, THAT is our focus.

Get a Free Website Design Quote Now!

On the other hand, your logo should be prominent. In most cases, that means at the top left of the screen with as little clutter around it as possible. Even small, it is immediately identifiable and easy to spot. An additional advantage of using a slightly smaller brand mark is it frees up horizontal space on the website. Take a look at the navigation bar for our client In Phase Product Solutions:

The logo sits comfortably to the far left of the navigation, leaving plenty of room and making it easy on the eyes. But, it is easy to find. Visual impact without clutter. The brand is in its proper space, recognizable without being overwhelming.

Color is important. So is lack of color.

The color utilized in a brand mark gives our designers a clear path to design style. Let’s take a look at In Phase again.

Note that the colors from the logo mark – orange, green, black – are translated into the design in subtle but important ways. However, as an alternative, the logo can be simply treated as a design and the colors integrated separately.

Case in point our client Hoover Slovacek. Their main law firm website incorporates their rather demonstrative logo in their signature green color. This was critically important to them because they had nurtured their brand over decades. So, it became a focal point for them as we see below.

However, when we built a microsite for them for their golf course litigation practice, we employed a much more subtle approach. Gone is the green color and the oversized brand mark. Instead, it’s subtle and reasonably sized.

It provided simplicity and kept the focus on THE MESSAGE, which was more important than their brand on this website. Both approaches work, but tailoring them correctly can be the key to stimulating the interests of your potential customers.

Logos should be icons too.

Finally, let’s go back one more time to In Phase. When there is a distinctive brand mark used in the logo, one way to make it stand out is by making it prominent it in mobile view. On a phone, there is extremely limited space. As a result, a wide logo will swallow up even more room than it does on a website, distracting from the message. In mobile environments, getting to the point is even more important than on a desktop. One option is simply eliminating the name altogether.

Note how clear the message is, yet the logo remains front and center. There is no distraction or clutter. It’s simple, powerful and impactful. This probably won’t work for brand marks made primarily of words, but if you do have the ability to separate the mark from the text, it comes in handy.

It’s also great for social media icons, which are always a perfect square. Much easier to fit the logo above into that than the brand mark plus the name of the company.

Integrating a company logo into a website requires quite a bit of forethought. We strive to make sure you get the strongest possible emphasis on your brand without detracting from your message. For more information, please call us at 888-424-6363 or get a free quote today!