Have a Blurry or Pixelated Logo? Fix It with This Simple Trick!

Burry or pixelated logo – every graphic designer’s nightmare, isn’t it? No layout will ever save a website who’s logo is not crystal crisp.

You know, when you buy a new lavender-colored car and then, suddenly, you start seeing lavender-colored cars everywhere? 

Maybe? 

Well, it’s the same with the topic of this post. You know, once I discovered this soon-to-be-exposed problem on my own site, I started noticing it on a lot of your sites as well.

Are you ready? *drumroll, please*

I’m going to teach you a stupidly simple trick for converting your logo into a crisp, non-pixelated file that you can scale up or down to your heart’s content.

Does your logo look blurry or pixelated on your WordPress site? Fix it with this simple trick!

Now, I’m writing this post because I want to wow you with my design prowess. Truth be told, I have none.

No, the reason I’m writing this post is that I literally spent hours scouring forums for this answer the other day. What a waste of time!

My question is: how can I make my text logo not look pixelated or blurry?

Simple question, no?

I did not find a single helpful search result. Nada.

For the record, here is the logo I was working with:

Lest you tell me it’s not that blurry, look… It’s my logo, and it should look freakin’ crisp.

If you are a perfectionist, I know that you get it.

So, aside from the other issues that said logo embodies, I knew that it had to not be blurry.

Here’s what I tried that didn’t work (remember that I am not a graphic designer, so these may sound stupid to you if you are):

Fix blurry logo in WordPress:

1. Exporting the file at 300 PPI (this just makes the image bigger);
2. Adjusting a bazillion other settings involving terms like “alias” (no change);
3. Doing a command + Y or something like that (no change to the export);
4. Doubling my export size (my WordPress theme wouldn’t shrink the image, so it was way too big).
5. Creating a smart object in Photoshop that is linked to the Adobe Illustrator file (dumb).

Finally, I texted my friend (a wonderful graphic designer, web designer, and otherwise decent human being) late the other night for help. After about an hour, he handed me back the solution, which I’m about to share with you.

[Just a quick note: I use self-hosted WordPress and uploading my logo requires the use of a free plugin because WordPress doesn’t recognize SVG files otherwise. If you use another platform like Squarespace, I’m afraid that this post probably won’t help.

Here’s how to make your logo look pixel-perfect at any resolution:

1. Open Adobe Illustrator and open your logo. Then,
2. Click on the Selection tool (black arrow) to select 'Type' from the menu, then click on "Create Outlines."
3. Go to ‘File’ => ‘Save As’ => Choose “svg” under the "Format" drop-down list, then "Save" and “OK”.
4. Right-click on your saved file, then choose "Open With" and choose your favorite text editor. I use Text Wrangler (it’s both awesome and free), but you could use any notepad/text app.
5. Beginning on or around line 2, there will be SVG…
6. Type width= "400" (replace “400” with however wide you want your logo to be in pixels). Then, hit your spacebar and type height=" 100" (replace “100” with the height of your logo). Hit the spacebar once more to save your file.
7. Upload the WordPress plugin SVG Support and activate it.
8. Now, drag your logo into your media library and replace your existing logo with it.
9. Go back to your Illustrator file and undo the “Create Outlines” move before you save and close your file.

That’s it!

Blurry Logo fix: Reader Feedback

This came from an awesome reader via email who did not want me to credit her (thank you, wonderful human!). Please consider altering my instructions above accordingly. Note that I did not personally test-drive these suggestions…

I am SO happy and grateful to you for posting this oldie but goodie. I have done a website design for years, but this stumped me, and now as we edge into SVG files for logos and images, I needed a quick how-to versus the long drawn out blogs written in developer language. And none work!

To add to your post, the SVG logo sometimes won’t appear in your website header. I pasted a sample line below code when using a text editor to change the file size (for a favicon set at 3030). This way, the viewBox aligns with the file size, and nothing is cut off or missing. 

Cheers!

xmlns: xlink="http://www.xyz.org/2000/svg" xmlns: xlink="http://www.xyz.org/2000/svg" xmlns: xlink="http://www.xyz.org/2000/svg"http://www.xyz.org/1999/xlink viewBox="0 0 30 30" width="30" height="30">

image id="XYZ" x="0′′ y="0′′ width="30′′ height="30′′ xlink: href="data: image/...

[Changed width and height in three places. [I also changed x and y to “0” as those were different numbers and caused the viewBox cutoff.]

… the end of fantastic reader feedback 3.

Another reason why the logo turns up blurry and how to fix it:

Why is my logo smudged?

Small pictures, such as logos, typically appear blurry (ex: 200px X 200px) on high-definition screens, such as the MacBook Pro. This is due to the fact that HD televisions utilize twice as many physical pixels to display the logo (ex: 400px X 400px). As a result, the logo is simply resized (scaled UP), leading it to lose its definition.

Option 1: Use SVG Image Format to Solve This (Recommended)

SVG is an abbreviation for Scalable Vector Graphics. As the name implies, it is a scalable image format with no pixels. Use SVG format for any significant pictures, such as a logo, that you want to appear clear, sharp, and crisp. You can utilize plugins like SVG Support, which allows you to upload sanitized SVG files.

You do not have to use the Retina Logo option if you uploaded your logo in SVG format.

Retina Logo (Option 2)

If you don’t have the picture in SVG format, upload the retina logo for your website, so it looks sharp and crisp. The retina logo should be at least twice as big as it is now. More information is available here.

What is the ideal logo image size (PNG/JPG/WebP)?

The recommended image size for uploading your logo image file in .png, .jpg, or .webp formats is 180 x 60px (length X height). This logo size should be used as a guideline only, not as a hard and fast rule. The final logo picture size will be determined by the format of your design, the typefaces and phrases used, and so on.

For example, if your logo is square, you should choose sizes ranging from 180 x 180px to 60 x 60px, depending on what works best for your design. Also, if your logo has long words (e.g., Peek & Cloppenburg), you would require a higher size than 180px for length to keep the height around 60px (therefore, a size closer to 25060 px or 300x60px would be used).

Keep in mind that uploading the retina logo, as indicated above, will prevent your logo from getting blurry on some mobile devices. As a result, if your logo is 180x60px, your retina logo should be at least 360x120px (proportionally 2x size of standard logo).

Let’s cover a few things that we just did.

1. In Illustrator, we created outlines of text and shapes. This eliminates the pixelation that occurs when images (jpeg and png files) are enlarged and the blurriness that accompanies smaller images (like my logo).
2. In our text editor, we specified the size we wanted our logo to be. Why? Because SVG files will fill the size of their containers, So, if your WordPress theme allows you to import a logo that spans the entire width of your site (like mine), your SVG logo will get all excited and overwhelm your screen—hence, the need to constrain it.
3. Back in Illustrator, we undid the “Create Outlines” move because once you convert your logo to an outline instead of text and shapes, you cannot edit it as you normally would. In other words, if you decide later that you’d like to see what your logo would look like using the Montserrat font, you will have to recreate it. By undoing this last step, you won’t have to.

Now, here are screenshots of the text editor bits:

This is what your lovely SVG file actually looks like. Don’t be scared.

The highlighted blue text is what you will need to enter to constrain the dimensions of your logo (use your numbers, not mine).

And, here is the plugin you will need to upload:

I promise not to post too much on these sorts of topics, but I just had to share this secret with you. Now, I’d love to know whether you have any awesome graphic design secrets you’d dig to share. Do tell! Thanks

Oh, and if you stumbled on The Spreadsheet Alchemist through this post’s Pinterest image and are new to my site, why not click here to see what other content may interest you?

Thanks so much for swinging by! 

2024 UPDATE: I used to have a video for this post, but it disappeared into cyberspace. So my apologies, but I had to remove the link. Also, I’m using a new WordPress theme that makes following my own advice in this post ineffective. The result is a crisp but tiny logo, and rather than troubleshoot, I just said “WTF?!” and reverted to using a blurry PNG logo. Some things just aren’t worth it to me to worry about anymore. But these instructions worked great with my previous WordPress theme. Good luck!