Logo looks jaggy when embedded on a webpage

Hi forum,

This is my first post.

I created a logo using just text in Adobe Illustrator, but when embedding it in a browser or saving it as a PNG, the edges look jaggy.

Tried many different settings and graphic design applications, but no luck.

However, logos and text on other websites look great, for e.g, FontSquirrel: http://www.fontsquirrel.com/fonts/fira-sans

Please find attached few related screenshots (the Microsoft Logo looks very sharp). Can’t I get a much sharper graphic like Microsoft’s logo?

*Current settings: 300 Resolution, PNG-24, Transparent, Type Optimized