Logo File Formats Explained: SVG, PNG, PDF, EPS and AI

Which logo file formats do you need?

You need a small set of logo file formats: SVG for screens, PNG for places that don't accept SVG, PDF or EPS for print, and an editable source file. That covers almost every use a startup will have, from the website header to a trade show banner. The table below is the one-glance answer.

Every format above should come in more than one version: full color, one color in black, one color in white and, ideally, the different lockups your logo has. That's where most handoffs fall short. Our checklist of the logo files every designer should hand over covers the full list you can paste into a contract.

If you're still in the middle of the project, the files are the last step of the logo design process. It's worth agreeing what you'll receive before the work starts, because adding formats at the end is slower than planning for them.

What's the difference between vector and raster logo files?

Vector logo files describe the logo as shapes and curves, so they stay sharp at any size. Raster files describe it as a grid of pixels, so they blur or pixelate when scaled beyond their original size. Your logo should always exist as a vector first, with raster files exported from it as needed.

SVG, PDF, EPS and AI are vector formats. PNG, JPG and WebP are raster formats. The difference matters most when the logo needs to grow: a 500 pixel PNG looks fine on a slide and terrible on a banner. A vector file can be printed on a business card or the side of a building from the same source.

If all you have is a PNG or JPG, you don't have a real master file. Our guide on how to get a vector version of your logo explains why auto-tracing rarely works well and when a proper redraw is the better option.

SVG vs PNG logo: which should you use on your website?

Use an SVG logo on your website whenever you can. SVGs stay sharp on every screen density, are usually tiny in file size, can be styled with CSS and can switch colors for dark mode. Use PNG only where SVG isn't supported or practical, such as email signatures, some social platforms and older tools.

For PNG exports used on screen, export at two or three times the size they'll be displayed at, so they look sharp on high-density displays. A logo shown at 200 pixels wide in a slide should be exported at about 400 to 600 pixels wide.

If your site is being built from Figma, logo exports are one of the details covered in our guide to preparing Figma files for development. Clean, consistently cropped SVGs save developers real time.

What are AI, EPS and PDF logo files for?

AI, EPS and PDF are the formats designers, printers and vendors use. AI is the editable Adobe Illustrator source. EPS is an older vector format many print shops and sign makers still ask for. PDF is the most universal vector format: printers accept it, and anyone can open it to preview the logo.

• AI files are for editing. You need them, or an equivalent Figma file, if you ever want to change the logo or export new versions. Most founders can't open them, and that's fine.
• EPS files are for vendors who ask for them, such as embroidery, signage or promotional product suppliers. If a vendor doesn't specify, send a PDF.
• PDF files are the safe choice for print. Export them as vector, with text outlined and, for professional printing, in CMYK color.
• Figma files are increasingly the source of truth for startups. Make sure you own the file or a copy in your own workspace, not just a view link.

Owning these source files is part of owning your logo. If you're thinking about protecting the mark, our guide to whether you can trademark your logo explains why written ownership of the artwork matters.

Which color modes do your logo files need?

Your logo files need RGB color for screens and CMYK color for print, and some brands also need spot colors such as Pantone for exact matching. You'll also want the HEX codes for developers. Using the wrong color mode is why logos look dull in print or oddly saturated on screen.

Early-stage startups usually don't need spot colors unless they're printing packaging or a lot of merchandise. RGB, HEX and CMYK cover most needs. What you do need from day one is solid black and solid white versions of every lockup, because you'll use them on photos, dark backgrounds and partner pages more often than you expect.

What does a professional logo file handoff look like?

A professional logo file handoff is organized by version and use, so anyone on your team can find the right file without asking a designer. The folder structure below is the one we recommend asking for. It separates screen and print files, includes every color version and keeps the source files apart from the exports.

1. 1

   01 Source

   The editable master files: the Figma file or AI file, with every lockup and color version on clearly named artboards. This is the folder you protect most.

2. 2

   02 Screen (RGB)

   SVG and PNG exports of each lockup in full color, black and white. Subfolders for primary, stacked and symbol. PNGs exported at large sizes with transparent backgrounds.

3. 3

   03 Print (CMYK)

   PDF and EPS files of each lockup in CMYK, with text outlined. Add spot color versions here if your brand uses them.

4. 4

   04 Icons

   Favicon files, an app icon master, social avatar crops and any other small-size versions of the symbol.

5. 5

   05 Guidelines

   A short PDF or page covering clear space, minimum sizes, color values (HEX, RGB, CMYK) and examples of correct and incorrect use.

Name files so they sort and describe themselves, such as company-logo-primary-color-rgb.svg or company-logo-symbol-white.png. Avoid names like final-v3-NEW.png. If your designer delivers a single folder of loosely named files, it's worth an hour to reorganize them this way. The versions in each folder, such as primary, stacked and symbol, are explained in our guide to logo variations.

Which logo file should you use where?

Use SVG wherever a screen and modern software are involved, PNG wherever compatibility matters more than scalability, and PDF wherever ink is involved. The table below covers the places startups use their logo most often, with the version that usually works best.

Two contexts deserve extra care. The first is dark backgrounds, where a logo designed for white often needs a separately adjusted reversed version rather than just inverted colors. Our guide to logos on dark and light backgrounds covers how to get those right. The second is motion: if your logo animates on the website or in videos, you'll need the source or a dedicated animation file. Our guide to logo animation explains the options.

What logo file mistakes should you avoid?

The most common logo file mistakes are relying on a single PNG, not owning the source file, mixing color modes and using files with inconsistent padding. Each one causes small problems that add up: blurry slides, dull print, misaligned headers and a designer bill every time you need a new version.

• One file for everything. A single color PNG ends up stretched on banners and invisible on dark slides.
• Inconsistent cropping. Exports with different amounts of empty space around the logo make it look misaligned in headers and partner grids.
• Live text in files. If the wordmark is still type rather than outlined shapes, it changes when the font isn't installed.
• RGB files sent to print. Colors shift, often toward dull or muddy tones.
• Renamed copies everywhere. Five versions on five drives, none clearly the latest. Keep one shared, organized folder.

Logo files also come up during website migrations. Moving platforms is a good moment to replace old PNG logos with SVGs and tidy image file names and alt text. Our guide to image SEO in migrations covers that side, and if you're moving to a self-hosted CMS, the Framer to WordPress migration guide touches on how assets move between platforms.

How do you get the right logo files if you don't have them?

If you don't have the right logo files, start by asking the original designer for the source and the missing exports. If that's not possible, have the logo redrawn as a clean vector, then export a full set from the new master. A redraw is also a cheap chance to fix small problems, such as uneven spacing or details that fail at small sizes.

1. List the files and versions you have, and where each is used.
2. Ask the original designer for the source file and an IP assignment if you don't have one.
3. If there's no source, commission a vector redraw from the best existing file.
4. Export a full set organized like the handoff folder above.
5. Replace old files everywhere: website, product, templates, social profiles and shared drives.

While you're tidying up the brand basics, it's also a good moment to check the rest of your foundations, such as your domain. Our guide on whether you need a .com covers how startups handle domain choices alongside their name and logo.

Logo file guides: what to read next

This guide covers the formats. The articles below go deeper into each part of a complete logo file set, from what to ask your designer for to getting reversed versions right.