You uploaded a logo that looks fine on your monitor. Then someone screenshots your website on their MacBook Pro or iPhone and sends you the image — and your logo looks like it was photographed through frosted glass. Soft, blurry, unprofessional. What went wrong?
The answer almost always comes down to one thing: your logo file format or resolution is wrong for high-density displays. The question of svg vs png for logos becomes very visible on Retina screens — one is always sharp, and one requires double the pixels you might expect. This guide explains exactly why this happens and gives you three concrete fixes.
What Is a Retina Display and Why Does It Matter?
Apple coined the term "Retina" for displays with pixel density high enough that individual pixels are imperceptible at normal viewing distance. In practice, Retina and HiDPI displays pack 2× or 3× the pixels into the same physical space as a standard monitor. A 13-inch MacBook Pro display has 227 pixels per inch (PPI). A standard 1080p monitor runs at 92–110 PPI.
The key technical detail: the operating system and browsers report the screen as its logical size, not its physical pixel size. A MacBook Pro with a 2560×1600 physical resolution reports to your CSS as a 1280×800 screen (at 2× density). When you place a 100px CSS element on that screen, the browser uses 200 actual physical pixels to display it.
If your logo image is only 100 pixels wide but the browser needs to fill 200 physical pixels — it interpolates. It fills in the gaps by blending adjacent pixels. The result looks blurry. This is the entire root cause of blurry logos on modern devices.
Why JPG Logos Look Blurry: The Compression Factor
JPG logos suffer from a double problem on Retina screens. First, the same pixel density issue applies — a low-resolution JPG logo gets stretched on a Retina display. Second, JPEG compression introduces artifacts that become more visible when the image is stretched.
JPEG uses Discrete Cosine Transform (DCT) compression, which divides your image into 8×8 pixel blocks. Within each block, it averages color information and discards fine detail. For a photograph with gradual tonal transitions, this is invisible. For a logo with a sharp black letterform on a white background, each 8×8 block creates a subtle mosaic of slightly different shades — what designers call "JPEG artifacts" or "ringing."
On a standard monitor, these artifacts might be barely noticeable. On a 2× Retina display that's now showing your logo at 200% of its native pixels, those artifacts are stretched along with the image. The blocky 8×8 compression grid becomes a visible 16×16 pattern on screen. The result is a logo that looks blurry AND has visible compression noise around text and geometric edges.
Why Low-Resolution PNG Logos Look Blurry
PNG logos avoid the compression artifact problem — PNG uses lossless compression that preserves every pixel exactly. But a PNG logo can still look blurry on Retina screens if it's the wrong size.
If your website header displays a PNG logo at 200px wide, and you've uploaded a 200px-wide PNG, a Retina display needs 400 actual pixels to render that logo sharply. It only has 200 to work with. It stretches. It blurs.
The fix: upload a PNG that is double (or triple for 3× displays) the CSS display size. If your logo displays at 200px wide, upload a 400px-wide PNG with the same visual content. The browser scales it down for standard displays (looks fine) and uses the extra pixels for Retina displays (looks sharp).
The DPI Problem for Print
There's a related but different problem when PNG logos are rasterized at the wrong DPI for print. Screen logos are typically created at 72–96 DPI. A logo that's 300 pixels wide at 72 DPI is 4.16 inches wide on screen — but when sent to a printer expecting 300 DPI for professional printing, that same 300 pixels produces a logo that's only 1 inch wide. The designer stretches it to fill 4 inches, and now you have a 1-inch image stretched to 4 inches = severe pixelation.
This is why print vendors ask for "300 DPI at final size." A business card logo that's 3 cm wide (about 1.18 inches) needs at least 1.18 × 300 = 354 pixels to print without visible pixelation. For safety margin, always supply 2× that — 700+ pixels for any print logo.
The Three Solutions, Ranked by Impact
1Use SVG for all web logos (biggest impact)
SVG files store logos as mathematical paths, not pixels. There is no pixel grid to stretch or blur. A browser on a 3× OLED display recalculates the paths at 3× resolution — perfectly sharp, zero compromise. For a logo with simple geometric shapes and text, an SVG file is typically 2–15 KB versus 30–80 KB for an equivalent PNG. Switch to SVG and the Retina blur problem disappears entirely for your website.
2Use @2x PNG (double the pixel dimensions)
When SVG isn't available (email, social media, CMS restrictions), export your logo at exactly double the CSS display dimensions. Header logo displays at 220×60px? Export PNG at 440×120px. Use width="220" height="60" in your HTML <img> tag so standard displays scale it correctly, while Retina displays use the extra pixels for sharpness. For 3× iPhone Retina, you'd ideally export at 660×180px — though 2× usually provides acceptable quality even on 3× displays.
3Use high-res PNG minimum 500px wide for web
If you can't create exact @2x versions, simply keep all web PNG logos at a minimum 500px wide. For most website headers that display logos at 150–250px wide, a 500px PNG gives 2× pixels on standard displays when the browser scales it down. This isn't as precise as proper @2x sizing but eliminates most blurry logo complaints with minimal effort.
How to Diagnose Your Logo Problem
Here's a practical method to check your logo's Retina quality without a Retina device:
- Open your website in a browser (Chrome works best).
- Open Developer Tools (F12 → Ctrl+Shift+I on Windows, Cmd+Option+I on Mac).
- Click the device toggle (mobile icon) to enter device simulation mode.
- In the device toolbar, look for "DPR" or set the device pixel ratio to 2.0.
- Look at your logo. Does it appear blurry or soft?
Alternatively, on a Retina MacBook: take a screenshot of your website using Cmd+Shift+4. Open the screenshot in Preview. The screenshot is captured at Retina resolution — zoom in on your logo. If it looks soft at 100% zoom in Preview, your logo is rendering blurry on Retina screens.
Platform-Specific Minimum Sizes to Avoid Blur
| Context | Display Size | PNG Minimum for Retina | Best Solution |
|---|---|---|---|
| Website header | 150–250px wide | 500px wide | SVG |
| Email signature | 150–200px wide | 400px wide | PNG @2x |
| Social media avatar | 50–100px displayed | 500×500 upload | PNG 500×500 |
| Google Business Profile | 120×120 displayed | 720×720 upload | PNG 720×720 |
| Favicon | 16×16 or 32×32 | 64×64 ICO or SVG favicon | SVG favicon |
| Print (business card) | 3cm = ~1.18 inches | 354px @ 300 DPI minimum | SVG or 700px+ |
