Using your logo well on a new website

On a website, your logo belongs at the top left of every page, linked to your home page, at a size that is clear on a phone without crowding out your phone number. Send your designer the best file you have, ideally an SVG or a PNG with a transparent background, plus a version that works on dark colors. If your only copy is a blurry picture, get it cleaned up rather than stretched. And if you have no logo at all, your business name set in a clean font works perfectly well.

Where the logo goes

Top left, on every page. That is where visitors expect it, on computers and phones alike. On some layouts it sits in the center of the header, which can work, but top left is the safe default.

Linked to the home page. People tap the logo to go back to the start. Make sure it does.

Once in the header, maybe once in the footer. You do not need it in the middle of pages, on every photo or as a watermark. Repeating it everywhere looks insecure rather than confident.

On a phone, the header usually holds just the logo on one side and a menu button and call button on the other. Your logo has to share that small strip with the two things customers most want to tap.

How big it should be

Bigger is not better. A logo that fills the top of a phone screen pushes your headline and phone number down, and the visitor has to scroll before learning what you do.

As a rough guide:

On a phone, the logo is usually about the height of a large thumbnail, enough to read your name clearly.
On a computer, somewhat larger, but the header should still be a slim band, not a big block.
The name must be readable. If your logo has small lettering under a symbol, check it on a phone. If you cannot read it, use a simplified version in the header.

When the logo's shape fights the header

Logos come in shapes, and website headers are wide and short. A wide, horizontal logo fits easily. A tall or round one, like a badge, a stacked name with a symbol on top, or a circle with text around it, becomes tiny when squeezed into a short header.

Options:

A horizontal version: the symbol on the left, the name on the right. Many designers create this as part of a logo set; ask whether yours did.
The symbol alone on phones, with the business name written next to it in a matching font.
Dropping the tagline in the header. "Quality you can trust since 1985" in tiny letters under the logo is unreadable on a phone. Put the tagline, if you want it, in the headline area instead.

File types: what to send your designer

Send the best version you can find. In order of preference:

SVG. A vector file, which means it is made of shapes rather than pixels, so it stays sharp at any size and is small to load. Ideal for websites.
PNG with a transparent background. Sharp if large enough, and the background shows through around the edges, so it sits cleanly on any header color.
AI, EPS or PDF. Files from design software or print shops. Not used directly on websites, but a designer can turn them into SVG or PNG.
JPG. Common, but it cannot be transparent, so it often appears inside an awkward white box. A last resort.

It also helps to have:

A white or reversed version, for dark headers or footers.
A one-color version, for small uses.
A square version of the symbol, for the tiny icon in the browser tab (called a favicon) and for when someone saves your site to their phone's home screen.

Finding your original logo files

Many owners have only the small logo from their old website or a photo of their sign. The originals usually exist somewhere:

The designer who made the logo, even years ago.
Your sign shop, truck wrap company, embroidery shop or printer. They needed a good file to produce your signs, shirts and cards, and often keep it.
Online print accounts, such as the account where you order business cards.
Old emails. Search for "logo" plus file types like ".ai", ".eps", ".svg" or ".pdf".
Your old web designer or the builder account your old site lives on.

If you only have a blurry copy

Do not let anyone stretch a small JPG to fill a header. It will look fuzzy on every modern phone, and customers read that as "not quite professional".

Instead, have the logo redrawn (sometimes called vectorizing): a designer traces it into a clean vector file that looks identical but sharp. It is a small job compared with designing a new logo, and you get a file you can use on signs and shirts too. This is a cleanup, not a redesign. If you are tempted by a full new logo instead, read whether you need a new logo before a new website first.

If you have no logo at all

You do not need one to have a good website. A wordmark, your business name set in a clean, strong font in your main color, is a perfectly respectable logo, and many well-known companies use exactly that. It is sharp at every size, readable on a phone and costs nothing extra.

Pick a font that suits your trade, keep it to your business name (and maybe one short word like "Plumbing" in a lighter weight), and use the same lettering on your invoices and cards so it becomes yours.

Colors around the logo

The header color has to let the logo stand out. A dark blue logo on a dark blue header disappears; a logo with white lettering vanishes on white. Use the white version of your logo on dark backgrounds, or keep the header white or very light. Choosing a color scheme explains how to build the rest of the site's colors from your logo.

For visitors using screen readers, the logo image should have a short description, usually just your business name. Writing alt text for your website photos covers that.

What to do this week

Look at your current site on your phone: can you read your business name in the header?
Ask your sign shop, printer or logo designer for an SVG or a large transparent PNG.
Check whether you have a horizontal version and a white version.
If you only have a blurry copy, ask a designer to redraw it.
If you have no logo, choose a font for your name and stick with it.

With a good file in hand, you can see your site rebuilt first with your logo in place, and check how it looks in the header on your own phone.