How to enlarge a logo without it going blurry

A logo is the thing most likely to be needed bigger and least likely to survive it. It arrives as a 400 pixel PNG in an email, and then somebody wants it on a banner.

The good news is that a logo, unlike a photograph, is made of a small number of clean shapes, which means there is nearly always a genuine fix rather than a compromise.

Ask for the vector before anything else

Ten minutes of asking beats every technique in this guide.

A logo was almost certainly drawn in vector software. Somebody has an SVG, an EPS, an AI file or a PDF, and any of those can be output at any size, sharp, forever. The usual places to look:

• The company’s brand or press page, which often has a downloads section.
• The agency or freelancer who designed it.
• The printer who last produced business cards or signage.
• The original email thread when the identity was delivered.
• Inside a PDF of a brochure or a letterhead, where the logo is often still vector and can be extracted.

That last one is worth trying before giving up. A logo placed in a PDF as vector artwork can usually be pulled out with any PDF-capable editor, and a surprising number of brochures, price lists and invoices still carry the original artwork inside them rather than a flattened picture of it.

What to do when there really is no vector

Then you are working from pixels, and the order of operations matters.

Start from the largest, cleanest bitmap you have. A PNG beats a JPG, because JPEG puts ringing along exactly the hard edges a logo is made of. A screenshot of a website beats a photograph of a sign. If you have several versions, compare them at 100 percent and pick the crispest, not the biggest.

If it is a photograph of a logo, cut it out first. A logo on a shop front, a shirt or a sheet of paper carries the background with it. Remove that at the original resolution, before enlarging, so the edge detection is working on pixels that were really photographed. From a photo of a logo to a transparent PNG covers this end to end, including lighting and perspective.

Enlarge with a classical filter. This is the counter-intuitive part, because a model is better on almost everything else. A photographic model has learned that surfaces have texture, so it will put faint grain into a flat fill and small irregularities into a clean curve. Lanczos in linear light reconstructs the shapes and adds nothing. On a logo that is exactly the behaviour you want.

Then trace it. An automatic trace on a clean, enlarged bitmap gets most of the way there, and correcting the result by hand is far quicker than redrawing from nothing. Flat shapes and wordmarks trace very well. Gradients, soft shadows and photographic elements do not, and are usually better rebuilt than traced.

Why a model is the wrong engine here

It is worth understanding rather than just accepting, because the same reasoning decides other cases.

A super-resolution model is trained on pairs of large and small photographs. Everything it knows is about photographs: skin has pores, fabric has weave, stone has grain, out of focus areas have a particular kind of smoothness. When it meets a region of perfectly uniform corporate blue, it is looking at something outside its experience, and its best guess is that a large flat area of a photograph usually has some subtle variation in it.

The same applies to shape. Photographic edges are never perfectly straight, so a model’s idea of an edge includes a little irregularity. On a letterform, that irregularity reads as a wobble.

A classical filter has no ideas at all. Each output pixel is a weighted mixture of input pixels, and a flat area stays flat because every value going in is the same. That is why how to upscale an image recommends splitting the decision by the kind of picture rather than by the size of the job.

Exporting bitmaps that stay sharp

When the logo has to be a bitmap in the end, two rules cover almost everything.

Export at twice the display width for screens. A logo appearing at 180 CSS pixels wide should be a 360 pixel file, because dense displays draw two device pixels per CSS pixel. This is the single commonest cause of a logo that looks fine on a desktop monitor and furry on a phone.

Export at the print size times 300 for paper. A 2 inch wide logo on a business card wants 600 pixels. A logo across a 4 inch wide letterhead wants 1200.

Save as PNG rather than JPG. PNG is lossless and holds transparency, which a logo nearly always needs so that it can sit on any background; JPEG puts visible ringing along the hard edges that a logo is entirely made of, and cannot be transparent at all. SVG versus PNG covers when each is the right choice on a website.

Converting the other way

Once you do have a vector, going back down to pixels is easy and should be done deliberately rather than by dragging. An SVG rasterised properly is sharp at whatever size you ask for, and the sizes worth producing are usually a set rather than one: the favicon sizes, the app icon sizes, the email signature size, the social profile size.

The common failure here is a converter that ignores the drawing’s own viewBox, rasterises it at 300 by 150 pixels because that is the CSS default for a replaced element with no intrinsic size, and scales that up to whatever you asked for. The result is a blurry PNG from a perfectly sharp vector, which feels like a contradiction until you know the cause. The SVG to PNG tool on this site reads the drawing’s own size first and renders at the size you asked for, and will make a whole icon set in one go.

Rebuilding a wordmark from a small bitmap

Many logos are mostly type, and type is the easiest part to rebuild exactly rather than approximately.

Start by identifying the typeface. A small, blurry sample is often enough for a font identification service, and failing that, the shapes of a few distinctive letters will usually narrow it to a handful of candidates: look at the lowercase g, the a, the terminals on the c and the s, and the numerals. Designers also frequently choose from a small pool of well known families, so a guess is not as wild as it sounds.

Once you have the typeface, set the wordmark yourself, overlay it on the enlarged bitmap at low opacity, and adjust the tracking and any custom letterforms until it lines up. Ten minutes of this produces something genuinely resolution independent, which no amount of upscaling can.

Watch for the touches that make a wordmark a logo rather than a line of type: a shortened crossbar, a ligature between two letters, a letter replaced with a symbol, custom spacing between a specific pair. Those are what people recognise, and missing one of them is more noticeable than a slightly wrong weight.

If the mark next to the type is geometric, which most are, it can usually be rebuilt with circles, rectangles and a few boolean operations rather than traced. A traced circle is a polygon with forty points and it never quite looks right at large sizes, especially where two shapes are meant to meet exactly; a real circle does, and it is faster to draw than to correct a trace of one.

The order, in one list

Ask for the vector before you do anything else, because it removes the problem instead of managing it. Failing that:

Vector if it exists. Cut out the background at original size if it is a photo. Enlarge with a classical filter. Trace if it will be reused. Export at twice display size for screens and at 300 dpi for print. Save as PNG.

The steps, in short

1. Look for a vector first. Ask for an SVG, EPS, AI or PDF version. A brand guide, an agency, a printer or the original designer almost always has one, and it makes the problem disappear permanently.
2. If it is a photograph of a logo, cut it out first. Remove the background at the original size, before any enlargement, so the edge detection works on real pixels rather than invented ones.
3. Enlarge with a classical filter, not a photographic model. Lanczos in linear light reconstructs the shapes without inventing texture. A model trained on photographs will treat a flat fill as something that ought to have grain.
4. Trace it to a vector if it will be used again. An automatic trace of a clean, enlarged bitmap gets most of the way, and hand correcting the result takes far less time than redrawing from nothing.
5. Export at twice the display size for screens. Where a bitmap is unavoidable, export at double the CSS width it will appear at, so dense displays have real pixels to draw.

Questions

Why does my logo look pixelated when I make it bigger?

Because it is a bitmap: a fixed grid of pixels. Enlarging means filling in values between the ones that exist, and most software does that with a simple average, which is soft. A vector stores the shapes themselves, so there is nothing to fill in.

Can AI upscale a logo?

It can, and it is usually the wrong tool. Photographic models have learned that surfaces have texture, so they add grain to flat fills and small irregularities to clean curves. A classical filter, or better a trace to vector, gives a much cleaner result.

How do I turn a PNG logo into a vector?

Trace it. Clean up the bitmap first: remove the background, enlarge it with a classical filter, and increase the contrast so the edges are crisp. Then run an automatic trace and correct the result by hand. Simple wordmarks and flat shapes trace very well; gradients and photographic elements do not.

What resolution should a logo be for print?

For print, use a vector if at all possible. If you must use a bitmap, work back from the printed size: width in inches times 300 dots per inch, so a 2 inch wide logo on a business card needs 600 pixels.

Why is my logo blurry only on phones?

Phone screens draw two or three device pixels for each CSS pixel, so a logo exported at exactly its display width is being stretched. Export at twice the width, or use an SVG.

Should a website logo be PNG or SVG?

SVG for anything made of shapes: it is usually smaller, it is sharp at every size and on every display, and it can be styled with CSS. PNG is the fallback for logos with photographic or complex raster elements in them.