I've designed some badges for a new forum. In the mobile version I would like these to display the same size as the navigation icons.

I know that if they are too detailed, detail will be lost once they get too small. However, the badges are flat with not too much detail. But they do have text descriptions in the design. When I save and upload them as PNG, the design is very fuzzy and the text unclear even though it's at an ok size.

I'm using Illustrator to do this and wondering if there are some best practice methods in designing and saving PNG images so they are clear and sharp on the web at smaller sizes.

  • 1
    can you post an example of the badge?
    – user9447
    Commented Jun 11, 2015 at 18:15
  • What anti-aliasing settings are you using when saving for the web?
    – Scott
    Commented Jun 11, 2015 at 19:40

1 Answer 1


If you are saving for the web I would suggest using SVG. We do have a few questions that may help you out if you haven't searched the site:

Search for small fuzy

Results show:

Why does it seem Photoshop is the common answer to icon design instead of Illustrator?. As Alan points out it is better to create pixel by pixel so you might get a better result in Photoshop

Logo looking fuzzy on smaller sizes. DA01 shows that the logo is fuzzy when resized to a smaller size due to anti-aliasing.

Best workflow for icon design: Start big, or start small?. A good question on the preferred workflow for creating icons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.