Best image format for logos

A logo is not one file. You usually need a small set of assets that stay clear on large screens, tiny favicons, documents, and social previews.

The Logo Scaling Problem

Desktop / Print SVG (Full Detail)

App Icon PNG (Logomark)

Favicon PNG / ICO (Simplified)

The Golden Rule: Keep the source vector

Your primary website header should almost always use an SVG. It is resolution-independent, meaning it will look perfectly sharp on standard monitors, Retina displays, and 4K TVs without needing multiple file sizes.

Dark Mode SVGs

You can build dark mode directly into a single SVG file. By using the @media (prefers-color-scheme: dark) media query inside the <style> block of your SVG, the logo will automatically change colors when the user's OS switches to dark mode.

When to use raster formats (PNG, WebP)

You cannot use SVG everywhere. You must generate raster exports for:

Social Media (OpenGraph): Twitter, Facebook, and LinkedIn require JPG, PNG, or WebP for link previews.
Email Signatures: Many email clients (like older versions of Outlook) strip out SVGs. A PNG is mandatory here.
App Icons: iOS and Android require specific sized PNGs for home screen icons.
Document embedding: Generating PDFs or slide decks often requires high-res PNG fallbacks.

Avoid JPG for Logos

Never use JPG for a logo unless the platform explicitly forces you to. JPG does not support transparent backgrounds, and its compression algorithm creates ugly "mosquito noise" artifacts around sharp edges and text.

A reliable favicon stack (PNG + ICO)

For the broadest mobile and legacy support, stick with PNG and ICO. A practical setup is one PNG favicon, one ICO fallback, and one high-resolution Apple touch icon.

HTML

<!-- 1. PNG favicon for modern mobile and desktop browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">

<!-- 2. ICO fallback for older browsers -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- 3. Apple touch icon (180x180 PNG) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Logo Export Checklist

Outline your fonts: If your logo uses a specific font, convert the text to outlines/paths in Illustrator or Figma before exporting. Otherwise, it will render in Times New Roman on computers that don't have your font installed.
Export a safe-zone variant: Many profile pictures (like Twitter or Slack) crop your logo into a circle. Ensure you have a variant with enough padding so the edges don't get cut off.
Simplify the favicon: A complex logo with text is illegible at 16x16 pixels. Export a "logomark" (just the icon, no text) specifically for favicons.