Logo PNG vs SVG for Your Website: Which File Should You Upload?

The core difference

A PNG is a grid of pixels. It looks perfect at its exact size, fine when scaled down, and soft when scaled up. To look sharp on a retina screen, it must contain at least twice as many pixels as the space it occupies.

An SVG (Scalable Vector Graphics) is a text file describing shapes: paths, fills and strokes. The browser draws it fresh at whatever size and density is needed, so it is sharp on a 4K monitor, a phone and a printout — from one file.

SVG vs PNG compared

When SVG is the right choice

• You have the logo as a genuine vector (from your designer, or exported from Illustrator, Figma, Affinity or Inkscape).
• The logo is made of flat shapes and text converted to outlines.
• You want a dark-mode version without maintaining a second file.
• You care about every kilobyte on mobile.

Check that the SVG is real

Some SVG files are just a PNG wrapped in an SVG container — you get the downsides of both. Open the file in a text editor: a real vector has <path d="…"> elements; a fake one contains <image href="data:image/png;base64,…">. Another quick test: zoom the browser to 400% on the logo. A real SVG stays crisp.

Also check that text is converted to outlines. An SVG that uses <text> with your brand font will fall back to a system font on visitors’ devices that do not have it.

When PNG (or WebP) is the better choice

• The logo contains a photo, texture, complex gradients, glows or realistic shadows. As an SVG these become thousands of paths or embedded images and can weigh more than a PNG.
• You only have a raster file and no clean way to vectorise it. (Simple logos can be traced — see converting PNG to SVG.)
• Your site builder or theme does not accept SVG.
• The logo is going anywhere outside your website: social profiles, email signatures, marketplaces, documents — use PNG there.

For a PNG header logo, export at 2× the display size (e.g. 400 × 120 for a 200 × 60 slot) and consider WebP for a smaller file. Our format test shows the size differences.

SVG security and WordPress

An SVG is code, and code can include JavaScript. A malicious SVG uploaded to a site can run scripts when opened directly. For that reason WordPress blocks SVG uploads by default, and many other platforms restrict them.

Safe ways to use an SVG logo on WordPress:

1. Install a plugin that sanitises SVGs on upload (for example “Safe SVG”), and only allow trusted users to upload them.
2. Or paste the SVG code directly into your theme’s header template or a custom HTML block — only for a file you trust.
3. Or keep using a PNG/WebP logo in the theme’s logo setting and add the SVG only via code.

Never upload SVGs from unknown sources. If you received an SVG from a third party, open it in a text editor and check for <script> tags or on…= attributes. You can also clean editor metadata and comments with the SVG Metadata Remover, which keeps the paths untouched.

Performance: making the header logo fast and stable

The header logo often appears in the first screen, so it can affect Core Web Vitals:

• Always set width and height attributes (or CSS aspect-ratio). Without them, the page jumps when the logo loads — that is Cumulative Layout Shift (CLS).
• Do not lazy-load the header logo. loading="lazy" delays images near the top of the page. Leave it off, or use fetchpriority="high" if the logo is the largest element in view.
• Keep it small. A header logo over 50 KB is almost always an oversized PNG.

<a href="/" class="site-logo">
  <img src="/images/logo.svg" width="200" height="60" alt="Brightside Bakery home">
</a>

For a PNG with retina support, use srcset:

<img src="/images/logo-200.png" srcset="/images/logo-400.png 2x" width="200" height="60" alt="Brightside Bakery home">

Dark mode with SVG

If the SVG is inlined in the HTML and its shapes use fill="currentColor", the logo takes the text colour of its container — switch the text colour for dark mode and the logo follows. For an external SVG file, a <picture> element can swap files:

<picture>
  <source srcset="/images/logo-white.svg" media="(prefers-color-scheme: dark)">
  <img src="/images/logo.svg" width="200" height="60" alt="Brightside Bakery home">
</picture>

Our website header logo guide covers sizing for desktop and mobile headers in detail.

Alt text for logos

When the logo links to the homepage, the alt text should describe the link destination, e.g. alt="Brightside Bakery home". When it is purely decorative next to the company name in text, use alt="". Never stuff keywords into logo alt text.