Png-based icon: Low-res: blurry on iPhone, clear on IE, High-res: Blurry on IE, clear on iPhone

Asked Apr 27 '17 at 20:19

Active Apr 27 '17 at 20:33

Viewed 27 times

I have a png based icon that I want to embed inside an input box, with CSS:

background:url(/images/icon.png) 20px 20px no-repeat #fff;

It should be 20*20 PX

If I use a high res icon, say 100*100: It's clear on iPhone, but sketchy on IE

If I use a 20*20 (lower res):

It's blurry on iPhone, and fine on IE.

What's the best trick to resolve this?

edited Apr 27 '17 at 20:33

asked Apr 27 '17 at 20:19

rockyraw

I think we may want to take a look at the evidence first. – Mr Lister Apr 27 '17 at 20:25
Use SVG or a font-based icon instead? – Heretic Monkey Apr 27 '17 at 20:27
@MrLister I added a photo – rockyraw Apr 27 '17 at 20:33
@MikeMcCaughan How Do I generate an SVG? The online tools I tried created a blank file – rockyraw Apr 27 '17 at 20:40
http://stackoverflow.com/q/1861382/215552 – Heretic Monkey Apr 27 '17 at 20:42
@MikeMcCaughan The only website that seems to work charges money for that, that's crazy. I would imagine that's a popular problem. – rockyraw Apr 27 '17 at 20:46
It's a pretty simple icon, I wouldn't be surprised if an SVG/font version is already out there. Try Font Awesome or [the Noun Project](https://thenounproject.com/search/?q=map%20pin). – Heretic Monkey Apr 27 '17 at 20:51
NounProject gives only black color (unless I pay), I need gray color. and fontawesome, I don't want to download the whole library just for a single icon. So I'm still out of good solutions. – rockyraw Apr 27 '17 at 21:18

0 Answers0