If your brand kit was done right, you'll get your logo in at least four formats: SVG, PNG, JPG, and PDF. Most founders open the folder, see four files that look identical, and have no idea which one to use where. Then they paste the JPG into Slack, the JPG into their email signature, the JPG into a billboard mockup. And the brand suffers, slowly, in ways they can't quite name.
Here's the actual rule for each format, when to use it, and when it'll burn you.
SVG: the one you should use almost everywhere on the web
SVG (Scalable Vector Graphics) is a math-based file format. The logo is stored as a description of shapes, not pixels. That means it scales infinitely. Looks identical at 16 pixels and 1,600 pixels.
Use SVG for:
- Your website logo in the header
- Anywhere on your site where the logo appears
- Browser favicons (in modern browsers)
- App icons in modern app stores
- Anywhere you need crisp scaling
Don't use SVG for:
- Email signatures (Outlook strips SVG, Gmail handles it inconsistently. Use PNG instead)
- Microsoft Office documents (older versions don't render SVG properly)
- Print files going to a printer that asks for a different format (most ask for PDF or EPS)
One important note: SVG files contain text. Your designer's notes, the layer names, the original colors. They're all readable if someone opens the SVG in a text editor. Most of the time this doesn't matter. If you're paranoid about leaking design metadata, run your SVG through SVGO (a free tool) before publishing.
PNG: the universal raster format with transparency
PNG (Portable Network Graphics) is a raster format. Made of pixels. But supports transparency. That makes it the default choice when SVG won't render correctly.
Use PNG for:
- Email signatures (universally supported)
- Slack profile images, Discord servers, social media avatars
- App preview images, OG cards, share images
- PowerPoint and Keynote slides
- Anywhere you need a transparent background but SVG won't work
Don't use PNG for:
- Anywhere SVG works. PNG at 32 pixels will look fine, but enlarged 4x it'll be soft
- Print at any meaningful size (you need PDF or EPS for print)
- Photos (use JPG; PNG files for photos are enormous for no benefit)
You should have at least three PNG sizes of your logo: small (200px wide), medium (800px), and large (2400px). Each gets used for different contexts. Resizing a small PNG up loses quality; resizing a large PNG down is fine.
JPG: only for photographic content
JPG (or JPEG) is a raster format optimized for photographs. It's a lossy format. Every time you save a JPG, it loses a small amount of quality. For logos with solid colors and crisp edges, JPG is almost always the wrong choice.
Use JPG for:
- Brand photography (lifestyle shots, team photos, product photos)
- Hero images that are mostly photographic
- Anywhere file size matters more than crispness
Don't use JPG for:
- Logos. Just don't. The compression creates visible artifacts around the edges of your letters and shapes, and the file can't have transparency, so your logo will always be on a solid background.
- Screenshots of UI
- Anything that needs sharp edges
If you've been using JPGs of your logo, switch them out. The damage is real and cumulative. Every JPG copy is slightly worse than the last.
PDF: the format for print and formal documents
PDF (Portable Document Format) is a vector container with strong color management. For print, it's the format printers usually want. It preserves vector quality, embeds fonts correctly, and handles color profiles for accurate printed output.
Use PDF for:
- Business cards going to a printer
- Stationery and letterhead
- Print marketing materials (flyers, packaging mockups)
- Brand guidelines documents themselves
- Any time you're sending a logo to a print shop or merch vendor
Don't use PDF for:
- Websites or apps. Browsers technically render PDFs but it's overkill and slow
- Social media images
- Anywhere SVG or PNG would do the same job at a smaller size
If your printer asks for "EPS". That's a related vector format. PDF and EPS are interchangeable for most practical purposes, but if the printer specifically asks for EPS, they have a reason. Send EPS. Most brand kits include both.
The format-by-context cheat sheet
Here's the abbreviated reference card. Bookmark this or paste it into your team's brand documentation:
- Website header logo → SVG
- Browser favicon → SVG (with ICO fallback for legacy browsers)
- Email signature → PNG
- Social profile avatar → PNG, 1000x1000px minimum
- Open Graph share image → PNG or JPG, 1200x630px
- Business card → PDF (for printer), PNG (for digital mockup)
- Letterhead → PDF or DOCX with embedded PNG
- App icon → SVG source, PNG exports at iOS/Android required sizes
- Slide deck logo → PNG (most reliable across PowerPoint, Keynote, Google Slides)
- Merchandise → SVG or EPS (vendor will ask for one)
- Billboard / large-format print → SVG, EPS, or high-resolution PDF
- Photo with embedded logo → JPG of the final composite
If you're not sure which format to use for a specific application, the default rules: SVG for web, PNG for everywhere that doesn't accept SVG, PDF for print, JPG only for photographs. Following just those four rules eliminates 90% of the format mistakes founders make.
And if you receive a brand kit that's missing one of these formats. For example, you got a logo but no SVG. Go back to whoever made it and ask for the source files. The brand kit is incomplete without them.
Your brand kit, ready in 10 minutes.
Five quick taps. Free preview before you pay.
Start building free →