I have created a logo for my business using photoshop. When I try and resize the image to be used on the website, it becomes really blurry!

I can't figure out what I'm doing wrong? I understand why it pixelates but no one else seems to have this problem? If I create the logo on a mch smaller canvas then the font becomes blurry on photoshop.

Any ideas?


  • first of all I'd always recommend creating logos in Adobe Illustrator as it's specifically for creating vector graphics (like logos) which can be scaled up infinitely. Can I ask what size you've set you logo up at, and what export settings you used? If you're exporting the file as a JPEG of PNG then these are what's known as raster files, which means they can't be scaled above the pixel values they've been exported at without a loss in quality.
    – Rory GDP
    Oct 25 '19 at 14:26
  • 5
    Logo design is usually done in illustrator for this exact reason.
    – joojaa
    Oct 25 '19 at 14:56
  • Can you show your resized logo or, if you don't want to show it here, some other example of what you mean by blurry. A similar layout scaled down, showing the same problem. We've had a lot of questions similar to this where it turns out, that the graphics are just to complex to reproduce at small sizes. The text might just be too small to be sharp at small sizes. Or it might look fine, but you have zoomed in too much or expect too much of a small image.
    – Wolff
    Oct 26 '19 at 1:18
  • why was post by @RoryGDP converted to a comment?
    – joojaa
    Oct 28 '19 at 17:41
  • Is it only the font that is getting blurry when reduced, and the rest is holding up well?
    – Steve
    Oct 29 '19 at 21:49

I can't figure out what I'm doing wrong?

The thing you have wrong is planning.

A designer needs to take into account the limitations of the medium, the usage, context, etc.

The logo needs to be an actual logo that works in different environments, with these limitations and characteristics.

Some variants need to be prepared, variants in colors, in positions, in arrangements, in the information displayed.

Also, the webpage needs to be adapted.

These are only some reasons for a logo to be constructed in other programs than PhotoDoNotUseItForThisShop.

If you are paying the adobe suite use illustrator if you want a free program use Inkscape.

But let me address one more important topic here. I am pretty sure you do not cut your own hair and make your own clothing. And you do not construct your own furniture, machinery, computers or whatever you have on your business. Someone else does them, so you can rely that they are the best looking stuff and the best quality you can afford.

Do that for your Logo, for your website. Give your business a chance to look good. This little problem with a blurry logo is just the tip of the iceberg.


you can convert your logo into a custom shape, which is vector and you can enlarge it to any scale. Steps: 1, create a new file and a blank layer, paste your logo in.

2, in Layer panel, control-click layer thumbnail to select contents of your logo

3, go to Path panel, click the downside button: make work path from selection

4, "A" for path selection tool, then drag an rectangle area a little smaller/insider than your whole canvas, but including your logo, of course. And you'll see the path control points.

5, right click anywhere in canvas, "define custom shape", name it. That's it. This shape is vector.

6, any situation you want to apply your logo, "U" for shape tool --> custom shape tool, select your supposed foreground color, now drag it out in canvas.


It also depends on how you have created your logo... if you have used an image with text in Photoshop this will have a bearing on the end result since the image alone will not scale upwards well resulting in the pixelation you mentioned.

If your logo is only text and shapes you should ideally start in Illustrator where you can export your logo as an eps or pdf which will scale easily without loss of quality.


Else, you can always export your logo as an SVG file (if made in Illustrator or equivalent program - so vector already)... however, it may not be recognized properly by every browser.

Now, if your logo becomes very blurry, one of two things: either way too big, or way too small. I would recommend checking the size you need and then use Photoshop to convert it to the proper size. Sizing correctly makes a GREAT difference.

Your Answer

