How to save vector icon for web use?

[gardenia0820]

Beginner here, I have been working on vector icons for a website and I've tried a few tutorials online to try to sharpen the image for web use.  Every image I create and save on both Illustrator and Photoshop turn out blurry when exported to .PNG. I have snap to grid, pixel and point checked, I have tried to create pathways in photoshop and opening in illustrator, I save all images in 72 dpi. When I save, I choose "Save for Web" and save in 24-PNG. What am I doing wrong? Can someone help me out?

[jdanek]

Try 144ppi Resolution instead of 72.

[Barbara Ash]

Because PNG is raster it will look blurred or pixelated. You could try PNG8 with No Dither. That will reduce blurriness, but will increase pixelization.

If your company or client will accept SVG file format, that will give you the nice smooth edges you are looking for. Choose File Save As and for Save As Type choose SVG. Once saved, you can view the SVG by opening it in Illustrator. It can also be previewed in a web browser by dragging the SVG file into your browser or by using the Open command in the browser.

[ceyhun_akgun]

Web images are low resolution.

The vector does not have sharp lines.

Use the pixel alignment option.

Seamlessly align your artwork with the pixel grid...

Best practices for creating web graphics in Illustrator

[Dan Rodney · Accepted solution]

You should be using SVG for vector web graphics.

Use the newer File > Export > Export As instead of the older File > Save As.

Tips for Creating SVG with Adobe Illustrator

[gardenia0820]

Wow, didn't realize it was that simple! Thank you!!

[default11zqluc0976q]

What if I'm trying to make an image to share digitally for uses besides websites; such as an emailable image or social media image? For example an email footer image or an email-postcard. It's not horrible, but I want a crisp logo to put under my email signature that looks professional. Another example is email postcard is something we use to advertise art shows. It is one image that includes graphics (logo and text) and an image. We also make graphic images to post on social media, how does one save a crisp graphic? Graphics with pictures is even more of a frustration.

I'm a nonprofit graphic designer, not a pro designer, but I've spoken with two pros. They couldn't solve the problem.  After trying every forum suggestion and export option, I get nothing but fuzziness (except for PDF, which alarms the spam bots).  Any expert advice would be greatly appreciated.

Thank you

-Stan

[Doug A Roberts]

You might want to create a new topic with the specifics of the file you want to save. Include examples of what you've tried and what's not right about them, as well as listing your requirements.

[Test Screen Name]

The “blurry” appearance may be just designing big and viewing small. Zoom in AI until the size is the same. (Never zoom in on the web graphic to check it’s ok!!!) Does it look better or just the same? Often people expect a lot of sharp detail and clear diagonal lines in tiny work But the screen can’t do it.