What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops as they do on smartphones, but there’s a lot more to it than that, leading to widespread confusion.The GIFs show many of the basic principles of responsive designs.

Responsive designs fluidly expand, whereas adaptive designs constrict as you expand a browser or viewport.

Positioning your design elements using pixels as X,Y coordinates can cause a site designed for one screen to look weird on another. At fertilepix, we use relative units, like percent of the screen, instead of static units like pixels.

Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. A vector image can more properly adapt to different resolutions.