SVG, PNG or WebP for logos
How to choose between SVG, PNG and WebP for a logo based on where it will be shown, from web apps to email, link previews, app stores and slides.
5 min read
For a logo, the format question is mostly a question about destination. SVG is the better format almost everywhere you control the renderer. PNG is the format that works almost everywhere you do not. WebP is a smaller PNG for the web, with a few gaps outside it.
This guide gives you the differences that matter for logos, a table of where each format is accepted, and how to export raster versions that stay sharp.
The formats side by side
| SVG | PNG | WebP | |
|---|---|---|---|
| Type | Vector (shapes) | Raster (pixels) | Raster (pixels) |
| Transparency | Yes | Yes (full alpha) | Yes (full alpha), in lossless and lossy modes |
| Compression | Text, compressed by the server | Lossless | Lossless or lossy |
| Sharp at any size | Yes | Only at the exported size or smaller | Only at the exported size or smaller |
| Recolor with CSS | Yes, when inlined or used as a mask | No | No |
| Typical simple logo | 0.5 to 5 KB at any size | A few KB at 64 px, much more at 512 px | Usually somewhat smaller than the PNG |
JPEG is missing on purpose. It has no transparency and its compression smears the hard edges that logos are made of. Use it for photos, not marks.
Where each format works
| Destination | SVG | PNG | WebP | Use |
|---|---|---|---|---|
| Web pages and web apps | Yes | Yes | Yes | SVG |
| Native app UI (iOS, Android) | Through each platform's vector tooling | Yes | Yes, on current OS versions | Follow the platform's asset pipeline |
| Unreliable; some major clients, including Gmail, do not show it | Yes | Varies by client | PNG | |
| Link previews (Open Graph and similar) | Generally not supported | Yes | Varies by platform | PNG or JPEG |
| App store icons | No | Required | No | PNG |
| Slides and documents | Varies by app and version | Yes | Varies | PNG, or SVG where supported |
| Yes, usually converted to PDF | Only at high resolution | No | Vector (SVG or PDF) | |
| Favicons | In most current browsers, with fallbacks | Yes | Rarely used | SVG plus ICO and PNG fallbacks |
A few of these deserve a sentence more.
Email. Email clients render HTML with their own engines and many strip or ignore SVG. A PNG exported at twice the display size, with width and height set in the HTML, is the dependable choice. Crypto logos in emails covers dark-mode inversion and alt text as well.
Link previews. When someone pastes your link into a chat app or social network, the preview image comes from tags such as og:image. Platforms fetch and rasterize that image themselves and expect PNG or JPEG. A 1200 × 630 image is a common choice; check each platform's documentation for current sizes.
App stores. App icons are uploaded as large square PNGs. At the time of writing, Apple's App Store asks for 1024 × 1024 and Google Play for 512 × 512. Check the current requirements in each store's developer documentation, since they change.
Slides. Keynote, PowerPoint and Google Slides have each added some SVG support over time, but behavior differs between apps and versions, and gradients or masks may not survive. If a logo looks wrong after inserting the SVG, use a high-resolution PNG.
File size, realistically
For a flat logo with a few shapes and colors, SVG is usually the smallest file, and it stays the same size whether you display it at 16 or 512 px. A raster file grows with its pixel dimensions: a 512 × 512 image has 64 times the pixels of a 64 × 64 one.
The picture flips for complex artwork. A logo with photographic texture, heavy blur effects or thousands of traced points can be larger as SVG than as a raster file, and slower to draw. If a logo's SVG is over 50 KB, check what is inside before assuming SVG is the efficient choice.
Between the two raster formats, lossless WebP is usually somewhat smaller than an equivalent optimized PNG. For logos, prefer lossless WebP. Lossy compression can leave faint halos around sharp edges and smudge flat color areas, which is exactly where logos are least forgiving.
Exporting raster versions that stay sharp
A raster logo is only sharp at the pixel size it was exported at, or smaller. Screens with a device pixel ratio of 2 or 3 need two or three times as many pixels as the CSS size. For a logo displayed at 32 CSS pixels:
| Screen | Pixels needed |
|---|---|
| Standard density (1x) | 32 × 32 |
| High density (2x) | 64 × 64 |
| Phones at 3x | 96 × 96 |
On the web, let the browser pick:
<img
src="/logos/token-32.png"
srcset="/logos/token-32.png 1x, /logos/token-64.png 2x, /logos/token-96.png 3x"
width="32"
height="32"
alt="Token name"
>
Always export from the SVG source, never by enlarging an existing PNG. Keep the background transparent unless the destination requires a solid one; app store icons and Apple touch icons, for example, should have a solid background. Converting SVG to PNG at the right size walks through tools and edge checks.
A rule of thumb
- Keep SVG as the source of truth. Every other format is an export from it.
- Ship SVG wherever you control rendering: your web app, your docs, your dashboard.
- Export PNG wherever someone else renders: email, link previews, app stores, and any tool that mangles your SVG.
- Use WebP when you would otherwise ship a large PNG on the web, such as a detailed illustration or a big hero image, in lossless mode for logos.
If you are unsure what an SVG is doing under the hood, what is SVG and why icons use it covers the basics. On this site, every logo in the icon library downloads as SVG at your chosen size, ready to be exported to whatever raster size a destination needs. For favicons specifically, which mix all three formats, see SVG favicons.