Blurry logo on Shopify or WordPress? Fix the source and display size
Diagnose a blurry website logo without endless uploads. Compare source pixels, display dimensions, high-density screens, theme constraints, and SVG or PNG exports.
Quick answer
Compare the logo’s actual pixel dimensions with the size at which the theme displays it. A 120 px raster stretched to 240 CSS pixels will look soft. Use a clean SVG when your platform and theme support it safely, or export a sufficiently large PNG from a vector master. Also check whether the theme serves a smaller thumbnail.
Separate source problems from theme problems
| Observation | Check | Fix |
|---|---|---|
| Original file is already blurry | Source dimensions | Recover the original or vectorize a flat logo |
| Original sharp, header soft | Served image and display width | Correct theme image sizing |
| Desktop acceptable, phone soft | Device pixel density | Supply a larger raster or SVG |
| Logo looks tiny inside a large box | Empty margins | Tighten the canvas appropriately |
CSS pixels and image pixels are not always one-to-one. A 200 CSS-pixel logo on a 2× density display benefits from roughly 400 source pixels. This is a practical sizing example, not a rule that every logo needs to be enormous. Extra pixels add weight and cannot repair an already blurred source.
A focused repair workflow
- Download or inspect the actual image served in the header, not only the file in your media library.
- Note its natural dimensions and rendered width. Check both desktop and mobile header versions.
- Find the original designer export. If only a flat raster remains, prepare a vector master with Logo to Vector.
- Export the format your theme accepts. Use SVG to PNG for a raster fallback and keep transparency when appropriate.
- Replace the asset, clear the relevant cache, and inspect the published page in a fresh browser session.
SVG is useful, but not a reason to bypass safety
Some publishing setups restrict SVG uploads because SVG can contain active or external content. Follow your platform’s supported upload and sanitization process; do not disable security globally just to upload one logo. A properly sized transparent PNG is a valid fallback.
Use the SVG optimizer to reduce unnecessary markup in a clean master. Optimization is not the same as recovering detail or correcting distorted letters. Check the visual result after every transformation.
Website logo acceptance checklist
- Header, mobile menu, and footer use the intended asset.
- No theme rule stretches the mark out of proportion.
- Dark and light backgrounds retain readable contrast.
- The image URL loads successfully without layout shifts caused by missing dimensions.
- Small lettering remains readable at actual display size.
Frequently asked questions
Does changing a logo to 300 DPI help on the web?
Not by itself. Browsers display pixels according to layout. The source pixel count and rendered size matter more than a print-resolution label.
Should I always choose SVG over PNG?
No. SVG suits clean logos and icons. PNG remains practical when the platform rejects SVG or the design relies on raster detail. Choose the simplest safe format that stays sharp at its real size.