Logo File Formats for Print and Web: What to Ask For

A new client sends the brief, and you ask for their logo. What comes back is a 200-pixel JPG with a white box around it, saved from their own website. It looks fine in the email. It looks terrible on a dark header, worse on a retina screen and completely unusable on a trade show banner. Most logo problems aren't design problems. They're file problems. Somebody never asked for the right files, so nobody has them. This guide covers the logo file formats worth asking for, what vector vs PNG actually means, what printers want, which color versions you need and how to use a logo properly in code, including optimizing SVGs and keeping them safe. The Short Answer: The Logo Package to Ask For When a logo is finished, ask the designer for: A vector master file, usually AI (Adobe Illustrator) or SVG, so the logo can be edited and scaled A print-ready vector file, usually PDF or EPS, for printers and vendors SVG files for websites and apps Transparent PNGs in a few sizes for documents, slides and social media A JPG for the occasional platform that won't accept anything else Color versions: full color, one-color black, one-color white and ideally grayscale Layouts: horizontal, stacked and the icon or mark on its own Color codes in HEX, RGB, CMYK and, if used, Pantone A short usage guide covering spacing, minimum size and what not to do If you only remember one thing, remember this: always get the vector source. Everything else can be exported from it. Nothing good can be made from a small JPG. Vector vs PNG: The One Distinction That Matters Vector Files Vector graphics describe shapes with math: points, lines, curves and fills. Because they're instructions rather than pixels, they scale to any size without losing quality. A vector logo looks just as sharp on a business card as on a billboard. SVG is the vector format of the web. MDN's SVG documentation defines it as "an XML-based markup language for describing two-dimensional based vector graphics." That XML part matters later, when we get to optimization and security. Raster Files Raster images, such as PNG, JPG and WebP, are grids of pixels. Each file has a fixed resolution. Enlarge it beyond that, and edges go soft or blocky, because the software has to invent pixels that don't exist. Why You Need Both Vector is the master. Raster is for everyday use in places that don't support vectors well, such as some email clients, document editors and social platforms. The right approach is to keep the vector files safe and export raster versions from them as needed, at the sizes you actually use. Each Logo File Format and When to Use It AI (Adobe Illustrator) The working file most designers create logos in. It's fully editable, with layers, artboards and color settings. You need Illustrator, or a compatible tool, to open it properly. Ask for it even if you'll never open it yourself, so a future designer can make changes. SVG The best format for websites and apps. SVGs are vector, usually tiny in file size, support transparency and can be styled with CSS. They're also plain text, so you can open one in a code editor and see exactly what's inside. EPS An older vector format still widely requested by printers, sign makers and promotional product companies. Many design tools now favor PDF for print, but having an EPS on hand saves time when a vendor insists on it. PDF A flexible format that can contain vector artwork, which makes it excellent for print and easy to share, because almost anyone can open it. A vector PDF from Illustrator is often what a printer prefers. A PDF that simply wraps a raster image is not a true vector file, so check what's inside. PNG The go-to raster format for logos, because it supports transparent backgrounds. Use PNGs in documents, presentations, social media profiles and anywhere SVG isn't supported. Export them at the sizes you need, including 2x versions for high-density screens. JPG JPG doesn't support transparency, so a JPG logo always sits in a rectangle, usually white. JPG compression can also blur the sharp edges logos depend on. Use it only when a platform requires it. WebP and AVIF Modern raster formats that are often smaller than PNG and support transparency. They're great for delivering images on a website, but they're not master files. If you serve them, keep a fallback for older browsers. Our earlier post on WebP fallback images covers how. Color Versions and Color Modes to Ask For Color Versions A single full-color logo won't work everywhere. Ask for: Full color, your primary version One-color black, for faxes, stamps, newspapers and single-color printing One-color white, also called reversed, for dark backgrounds and photos Grayscale, if the logo relies on shading Color Modes Screens and printers create color differently, which is why your logo needs color values for both: RGB and HEX describe color for screens. HEX is the six-character code used in CSS, such as #1f6f5c. CMYK describes color for most printing, using cyan, magenta, yellow and black inks. Adobe's guide to color modes explains which modes suit print, web and specialized workflows. Pantone or other spot colors are premixed inks used when a color must match exactly every time, such as on packaging or branded merchandise. Bright on-screen colors don't always have an exact CMYK equivalent, so a vivid RGB green may print duller. Your designer should choose matching values for each mode rather than letting software convert them automatically. Layouts Logos are used in very different spaces, so ask for a horizontal layout for website headers and email signatures, a stacked layout for square spaces and the icon or mark on its own for favicons, app icons and social avatars. Print: What Printers and Vendors Actually Want Printers generally want: Vector artwork, usually a PDF or EPS CMYK or spot color values, not just RGB Fonts converted to outlines, so the printer doesn't need your typeface installed A high-resolution raster fallback, typically 300 pixels per inch at the final print size, if vector isn't possible Some uses have extra needs. Embroidery often requires a simplified version with fewer fine details. Screen printing may need a one-color or limited-color version. Large signs and vehicle wraps almost always need true vector files. When in doubt, ask the vendor for their file requirements before you send anything. Web: Using Your Logo in Code Optimize the SVG SVGs exported from design tools often include editor metadata, comments and unnecessarily precise numbers. SVGO, a popular Node.js tool, strips that out: npx svgo logo.svg -o logo.min.svg On a sample logo exported with Illustrator-style metadata, SVGO 4.1 reduced the file from 735 bytes to 226 bytes, a 69% saving, without changing how it looks. One catch: in the same test, SVGO's default settings removed a role="img" attribute and an id that an aria-labelledby attribute referenced, which breaks the accessible name. Optimize first, then add accessibility attributes, or configure SVGO to keep them. Use Accessible Markup For most logos, a plain image tag is the simplest and most robust choice: If you inline the SVG, for example to change its color with CSS, give it a role and an accessible name: Acme Studio Size It Properly Always set width and height, or use CSS aspect-ratio, so the browser reserves space and the page doesn't jump while loading. That helps your Cumulative Layout Shift (CLS) score. If you need PNG versions, export them from the vector file rather than resizing an old PNG. This short script uses the sharp library to export transparent PNGs at a few widths: // export-png.mjs: export transparent PNGs from an SVG logo at set widths // Usage: node export-png.mjs logo.svg import sharp from 'sharp'; const input = process.argv[2] ?? 'logo.svg'; const widths = [240, 480, 1200]; // 1x header, 2x retina, large for (const width of widths) { await sharp(input, { density: 600 }) // rasterize at high density, then resize down .resize({ width }) .png() .toFile(`logo-${width}w.png`); console.log(`logo-${width}w.png`); } Run with node export-png.mjs logo.min.svg, it produced 240×80, 480×160 and 1200×400 PNGs with transparent backgrounds intact. Be Careful With SVG Uploads Because SVG is XML, an SVG file can contain more than shapes, including scripts and links to external resources. Your own logo files are fine. The risk comes when a site lets users upload SVGs, such as profile images or a CMS media library open to many contributors. OWASP's file upload cheat sheet warns that uploaded files can carry "Client-side active content (XSS, CSRF, etc.) that could endanger other users if the files are publicly retrievable," and lists XML bombs among malicious file types. If your site accepts SVG uploads, sanitize them with a maintained library, serve them from a separate domain or don't accept SVG from untrusted users at all. Favicons and Social Share Images Your logo mark usually becomes your favicon and app icon. Our earlier guide to favicon basics covers sizes and formats. For social shares, create a dedicated 1200×630 Open Graph image that places the logo on a background, rather than using the logo file directly, which often gets cropped awkwardly. The Handoff Checklist: What to Ask Your Designer For [ ] Editable vector master (AI or SVG) [ ] Print-ready vector (PDF and EPS) [ ] Optimized SVG for web [ ] Transparent PNGs at standard sizes, including 2x [ ] JPG versions for platforms that require them [ ] Full color, black, white and grayscale versions [ ] Horizontal, stacked and icon-only layouts [ ] HEX, RGB, CMYK and Pantone values [ ] Font names, and confirmation that their licenses cover your use [ ] A usage guide with clear space, minimum size and examples of misuse [ ] Clear, consistent file names, such as acme-logo-horizontal-white.svg [ ] Written confirmation that copyright in the final logo transfers to you on payment That last point matters more than most people realize. Without written terms, ownership of the design isn't automatic. Common Mistakes Using a JPG with a white box on a colored background Stretching or squashing the logo instead of scaling it proportionally A "vector" file that isn't vector. Some SVG, EPS and PDF files simply wrap a raster image. Open an SVG in a text editor, and if you see an tag with embedded data instead of paths, it's not a true vector logo. No white version, leading to awkward boxes on dark backgrounds No editable source, so every small change means starting from scratch Low-resolution files sent to print Getting a Logo Package Made If you're starting from scratch or your current logo only exists as a small image, a professional designer can create a proper package. Nexi Bloom's custom logo design packages include vector files in AI, EPS and SVG, high-resolution and transparent-background files, and a brand color palette guide. As with any designer, confirm the full list of files, color versions and ownership terms in writing before you start. FAQs What file format should a logo be in? A logo should be created as a vector file, usually AI or SVG, so it can be edited and scaled without losing quality. From that master, export SVG for websites, PDF or EPS for print and transparent PNGs for documents, slides and social media. What is the best logo format for printing? A vector PDF or EPS is usually best for printing, with CMYK or spot color values and fonts converted to outlines. If a printer can only accept raster files, provide a high-resolution PNG or TIFF at around 300 pixels per inch at the final print size. What's the difference between an SVG and a PNG logo? An SVG is a vector file that scales to any size without losing quality and is usually very small. A PNG is a raster file made of pixels, with a fixed resolution and transparency support. Use SVG on websites where possible and PNG where vectors aren't supported. Is EPS still needed for logos? Often, yes. Many printers, sign makers and promotional product suppliers still request EPS files, even though PDF has largely replaced it in modern design workflows. It's worth having an EPS version in your logo package so you're never stuck when a vendor asks for one. How do I know if my logo is a vector file? Zoom in a long way. A vector logo stays sharp at any zoom level, while a raster logo becomes blurry or pixelated. You can also open an SVG in a text editor: true vector files contain paths and shapes, not an embedded image. What logo files should I get from my designer? Ask for an editable vector master, print-ready PDF and EPS files, an optimized SVG, transparent PNGs in several sizes, full color, black, white and grayscale versions, horizontal and stacked layouts, color codes, font details, a usage guide and written confirmation that you own the copyright. Can I convert a PNG logo to a vector? Yes, but automatic tools such as image trace often produce rough edges and messy paths, especially from small or low-quality images. For a logo you'll use for years, have a designer redraw it as a clean vector, then export every other format from that. Wrapping Up The right logo files make every future job easier, from your website header to a printed banner. Ask for a vector master, print-ready files, web-ready SVGs and transparent PNGs, plus color versions, layouts and written ownership. Then optimize your SVGs, keep markup accessible and treat untrusted SVG uploads with care.