A Logo That Blurs on Sharp Screens

Sharp text, soft logo

Look at your website on a recent phone. The text is crisp, the photographs look fine, and the logo at the top is slightly fuzzy, with soft edges and a haze around the lettering.

On the office desktop it looks perfect, which is why nobody has noticed.

The difference is the screen. Phones, and a growing number of laptops, pack two or three times as many pixels into the same space, and a small logo file does not have enough to fill it.

Photographs hide it well. A logo, all crisp edges and lettering, does not.

Why sharp screens make small images soft

A web page is laid out in units that browsers call pixels, but on a high-density screen each unit is drawn with two or three real pixels across, and as many down.

Text is drawn fresh at the screen's full sharpness. An image is not: it has a fixed number of pixels, and if there are too few, the phone stretches them to fill the space.

A logo saved 200 pixels wide and shown 200 units wide is stretched across 400 or 600 real pixels. Stretching invents the missing detail by blending neighbours, which is exactly what soft edges are.

Every iPhone since 2010 has had a screen like this, as have most Android phones and many recent laptops.

Where a blurry logo usually comes from

• A file from an email signature, saved small to keep messages light.
• A screenshot of the old website or a PDF.
• An export at exactly display size, sharp on the screens of its day.
• A JPEG, with compression smudges around every edge.
• A white box where the background should be transparent.

The third is the one nobody did wrong. A logo exported at exactly its display size a few years ago was correct for the screens of the time, and the screens moved on.

The original file you need

Logos are usually drawn as vector artwork: shapes described mathematically rather than as a grid of pixels, so they stay sharp at any size, from a business card to the side of a van.

The original is normally an Adobe Illustrator file, an EPS or a PDF. A PNG or JPEG, however large, is a copy made from it at one particular size.

If you do not have it, the designer may. So may your business card printer, the sign shop that made your storefront sign, and whoever lettered your vehicles, since each needed the vector file.

Ask all of them. One copy is enough.

SVG on the website

SVG is the web's own vector format. Every current browser displays it, including Internet Explorer 11 on older office machines, and an SVG logo is sharp on every screen at every size.

A simple logo as SVG is often smaller than the PNG it replaces, and it resizes with the layout without loss.

Two cautions. Lettering should be converted to outlines first, or the logo may appear in a substitute font. And an SVG that merely wraps a pixel image is still blurry; only true vector artwork solves the problem.

WordPress does not accept SVG uploads by default, because the format can carry code. Adding it safely is work for whoever looks after the site, not a setting to switch on casually.

A worked example

A bubble tea shop near a college campus had a logo designed in 2006: the shop's name in rounded lettering beside a small cup and straw, in purple and green.

The original files had gone with the designer, who had since retired. The website used a PNG 180 pixels wide, taken from an old email signature, and on a phone the little cup looked smudged.

The supplier that printed the logo on the shop's cups still had the EPS file on record, and sent it the same day.

From that, the logo went onto the site as an SVG, with the lettering outlined. A PNG at three times the size went into the email signature, and a complete set of files went into a shared folder.

Nothing about the logo changed. It simply looked, on every screen, the way it had on the designer's monitor twelve years earlier.

When a larger image is the better choice

SVG is not always the answer. Some logos include photographic detail, and many email programs, Gmail among them, do not display SVG at all.

In those places, use a PNG saved at two or three times the size it will be shown, then set its display size in the code. A logo shown 200 units wide is saved 400 to 600 pixels wide.

Places the logo appears that people forget

The header is only the start. The small icon in the browser tab, called a favicon, is a tiny version of the logo, and often the blurriest thing about a site.

When someone saves your site to an iPhone home screen, the phone looks for a larger square icon, and uses a shrunken screenshot of the page if it finds none.

Then there are the Facebook profile picture, the Google My Business logo and the email signature.

A proper set of logo files

A complete set is not elaborate: the vector original, an SVG for the web, and large PNGs with transparent backgrounds for everything else.

It should cover each version of the logo you use: full colour, black, and white for dark backgrounds, plus any stacked or icon-only versions. Add the colour values for screen and print, written down.

Keep it in one shared folder with plain file names, and send that folder whenever someone asks for your logo.

The counter-case

Not every soft logo needs fixing this week.

A business about to have its logo redesigned should get the new set done properly rather than restore the old one, and a site due for a rebuild can pick up the new files then.

If the only flaw is a slight softness that nobody but you has noticed, it can join the list rather than jump it.

But the files themselves are worth finding now, while the printer and designer can still be reached. Find the original, put SVG on the site, and keep the set together.

This week

1. Look at your header on a recent phone.
2. Find the original vector file.
3. Ask your printer and sign shop if needed.
4. Put the logo on the site as SVG.
5. Save large PNGs for email and social profiles.
6. Replace the favicon and home screen icon.
7. Keep the full set in one shared folder.

Step two matters most, since every other file can be made properly from the original, and none can be made properly without it.

Another detail that shapes a first impression is covered in three icons saying quality, service and value.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.