Back to blog

SVG vs PNG for Logos: When to Use Each Format

svgpngdesignlogos

Both formats are standard choices for logos and icons, but they work in fundamentally different ways. SVG describes shapes mathematically, so it can be drawn at any size. PNG stores a fixed grid of pixels, so it is only sharp at the size it was made for. Knowing that single difference explains almost every practical trade-off below.

How the formats differ

An SVG file is text, a list of shapes, paths and colors, which the browser draws on demand. Zooming in simply redraws the same shapes at a larger size, so edges stay crisp. A PNG is a bitmap: enlarge it past its native size and the browser has to invent pixels, which shows up as blur.

Scaling and high-density screens

Phones and many laptops pack two or three device pixels into each CSS pixel. A PNG logo that looks fine on a standard display can look soft on those screens unless you also ship larger versions. One SVG covers every density, which is a major reason it is the default for logos on the web.

File size

For flat logos with a few shapes, an SVG is typically much smaller than a PNG, and it compresses well because it is text. The advantage flips for complex artwork. An SVG with thousands of paths, gradients and filters can be larger and slower to render than a PNG of the same image, and photographs should never be SVG.

Choose SVG when

  • The logo appears at many sizes, including on high-density screens.
  • You want small files for simple, flat shapes.
  • You need to recolor it or switch between light and dark themes.
  • You want to animate parts of it.

Choose PNG when

  • The destination does not accept SVG. Many email clients, some social media upload forms and a number of document tools only take raster images.
  • The artwork contains photographic or heavy raster effects.
  • You need one exact, guaranteed rendering with no dependence on the viewer's SVG support.

Favicons and app icons

Modern browsers accept SVG favicons, which is convenient because one file scales to every tab size. Older browsers and operating-system home-screen icons still want raster images, so most sites ship an SVG favicon alongside a PNG fallback, plus a larger PNG (commonly 180 by 180 pixels) for the Apple touch icon.

Exporting a PNG from an SVG

When you do need a PNG, export it at the largest size you expect to use, or at twice the displayed size so it stays sharp on high-density screens. You can always scale a large PNG down cleanly, but scaling up loses quality. Every icon page on this site lets you download a PNG at a size you choose, with presets from 64 to 1024 pixels or a custom width and height.

Fonts and text inside logos

If a logo contains text, check how the SVG stores it. Live text depends on the viewer having the same font installed, so the wordmark can render in a fallback font on someone else's machine. Before publishing, convert text to outlines so it becomes plain shapes. Exporting to PNG avoids the problem entirely, because the pixels are already fixed.

A security note about SVG

Because SVG is a text format that can contain scripts, you should never inline or serve SVG from untrusted sources without sanitizing it. Loading an SVG through an img tag is safe in this respect, since scripts do not execute there, but pasting unknown SVG markup into your page is not.

The short answer

Default to SVG for logos and icons on the web, keep a PNG export on hand for the places that cannot take SVG, and use PNG for anything photographic. Having both formats ready costs little and saves you from last-minute conversions.