Most brands have exactly one logo file — usually a PNG, sometimes a JPG — and they use it everywhere. The result: a blurry logo on Retina screens, a white box on dark website headers, a pixelated icon on print materials, and a stretched image on social profiles. The fix isn't finding a "better" single file. It's building a complete logo export kit with the right format and size for every context.
This step-by-step guide covers the complete workflow for exporting your logo correctly, whether you're using ConvertiImage for quick online conversions, Inkscape for precise SVG exports, or building a Brand Kit that covers the full svg vs png for logos spectrum. By the end, you'll have every logo variant you'll ever need — organized and ready to deliver in seconds.
Step 1 — Map All the Contexts Where Your Logo Appears
1Create your context inventory before touching any files
Most logo export problems happen because people export one file, then discover a new context it doesn't work for, export another, then another. Start by listing every place your logo appears or will appear:
- Website header (primary)
- Website footer
- Email signature (HTML email)
- Social media profiles (Twitter/X, Facebook, LinkedIn, Instagram, YouTube)
- Google Business Profile
- Business cards
- Letterheads and invoice headers
- PowerPoint/Google Slides presentations
- Merchandise (t-shirts, mugs, tote bags)
- Signage/banners (large format print)
- Favicon
Each context has specific requirements. This inventory becomes your export checklist.
Step 2 — Obtain or Create Your SVG Master File
2The SVG is your single source of truth
Every raster export (PNG, JPG) should be generated from your SVG master, not from an existing PNG. Here's why: each time you export from a raster source at a larger size, quality degrades. SVG exports are always mathematically precise at any size.
If your designer gave you an SVG: Open it in Inkscape or Adobe Illustrator and verify it looks clean. Check that text is converted to paths (not live text that requires fonts). Save a backup copy named logo-MASTER-DO-NOT-EDIT.svg.
If you only have a PNG or JPG logo: You cannot directly "convert" a raster logo to a quality SVG — auto-trace tools produce messy paths. Options: ask your designer for the original vector file (they should have it), recreate the logo in Canva or Inkscape from scratch, or hire a designer to vectorize it. For the raster workflow, skip to Step 3 using your highest-resolution PNG as the source.
If you're creating a new logo: Canva Pro exports SVG. Inkscape creates native SVG. Adobe Illustrator's native format is AI but exports clean SVG. Always create logos as vector from the start.
Step 3 — Export Raster PNG Versions for Non-SVG Contexts
3For email, social media, WordPress, and CMS platforms
Open ConvertiImage in your browser. Upload your SVG or highest-resolution PNG master. For each context requiring a raster PNG, set the pixel dimensions from the table below and download. Repeat for each size variant — the process takes under 2 minutes per variant.
Always export with a transparent background unless the destination explicitly requires a solid background (some platforms like Twitter/X automatically apply circular crops, so transparent works fine; others may require a colored background for visibility).
Step 4 — Prepare Print-Ready Files at 300 DPI
4Print is different — DPI determines quality, not just pixel count
For print materials, pixel dimensions alone don't tell the story — DPI (dots per inch) is the measure that matters. Professional print typically requires 300 DPI at the final print size. Here's the math:
Formula: Target print width (inches) × 300 DPI = minimum pixel width
- Business card logo (3cm wide = 1.18 inches): 1.18 × 300 = 354 pixels minimum → Export at 700px for safety
- Letterhead logo (5cm wide = 1.97 inches): 1.97 × 300 = 591 pixels minimum → Export at 1200px
- A4 brochure header logo (8cm wide = 3.15 inches): 3.15 × 300 = 945 pixels minimum → Export at 2000px
- Pull-up banner logo (20cm wide = 7.87 inches): 7.87 × 300 = 2362 pixels minimum → Export at 5000px (or use SVG directly)
For large format print (banners, posters, exhibition displays), 150 DPI is often acceptable since viewing distance is greater. Ask your print vendor for their specification sheet before exporting.
Step 5 — Organize Your Brand Kit Folder
5A named, organized Brand Kit prevents logo abuse forever
Create a top-level folder called Brand-Kit-[YourBrandName] with this subfolder structure:
Brand-Kit-[YourBrandName]/
├── 01-SVG-Master/
│ └── logo-master-DO-NOT-EDIT.svg
├── 02-Web-PNG/
│ ├── logo-web-1000px.png (general web use)
│ └── logo-web-500px.png (smaller contexts)
├── 03-Social-PNG/
│ └── logo-social-500x500.png
├── 04-Email-PNG/
│ └── logo-email-400px.png (displays at 200px @2x)
├── 05-Print-PNG/
│ ├── logo-print-700px-300dpi.png (business card)
│ └── logo-print-2000px-300dpi.png (brochure)
└── 06-JPEG-Fallback/
└── logo-white-background.jpg
Share this folder via Google Drive or Dropbox. Include a brief README.txt explaining which file to use for which context. This one-time setup eliminates "can you send me the logo" requests forever.
Context-Specific Export Recipe Cards
Website Header — Use SVG
- Format: SVG (inline or <img src="logo.svg">)
- Fallback: PNG 1000px wide with transparent background
- CSS: Set width to display size (e.g., width: 200px), let height auto-scale
- Why SVG: Infinitely sharp on all Retina/HiDPI screens, typically smaller than PNG equivalent
Email Signature — PNG 200px @2x
- Format: PNG with transparent background
- Pixel dimensions: 400px wide (displays at 200px, @2x for Retina sharpness)
- File size target: Under 20 KB (compress at convertiimage.com)
- Hosting: Upload to your website server and reference via URL — do not embed as attachment
- HTML: <img src="https://yoursite.com/email-logo.png" width="200" height="auto" alt="Your Brand">
Social Media Avatar — PNG 500×500
- Format: PNG-24 with transparent background or solid brand color background
- Pixel dimensions: 500×500 pixels (square)
- Covers: Twitter/X (400×400), Facebook (180×180), LinkedIn (400×400), Instagram (110×110)
- Note: Add padding around your logo so it doesn't get cropped by circular/rounded-square masks
Print Business Card — PNG 354px minimum at 300 DPI
- Format: PNG with transparent background (printer applies background via their template)
- For a 3cm wide logo: Minimum 354px, recommended 700px at 300 DPI
- Better option: Send the SVG directly to your print vendor — most professional printers accept SVG
- DPI setting: 300 DPI in your export settings
PowerPoint/Google Slides Presentation — PNG 1000px
- Format: PNG-24 with transparent background
- Pixel dimensions: 1000px wide × proportional height
- Insert as: Insert → Image → from file (not paste from clipboard, which degrades quality)
- Sizing in slide: Scale within the slide — PNG will remain sharp at any smaller display size
Troubleshooting: Common Logo Export Problems
| Problem | Cause | Fix |
|---|---|---|
| SVG not showing in email | Outlook/Gmail don't render SVG in img tags | Switch to PNG 400px wide with transparent background |
| Transparent background showing as black | Viewer/app doesn't support alpha channel (PNG alpha) | Export with white background as JPG for that specific context |
| Logo pixelated in email signature | PNG at 1× resolution — need @2x | Double the pixel dimensions (export 400px, display at 200px width) |
| SVG rejected by WordPress | WordPress blocks SVG uploads for security | Install Safe SVG plugin or convert to PNG 1000px wide |
| Logo looks blurry on MacBook | PNG is too small for 2× Retina display | Switch to SVG for website, or export PNG at 2× display size |
| Print vendor says logo is too low resolution | Screen PNG at 72 DPI, print needs 300 DPI | Re-export at 300 DPI from SVG master, or send SVG directly |
