在电话上的模糊图标

Question

我有一些非常清晰的图像/图标，它们在我的浏览器中看起来很棒。但我注意到在我的手机上他们有点模糊，我不知道为什么。

这是我手机上的截图，你可以看到它们并不敏锐。

手机上并不那么清晰，因为它们的尺寸要小得多（截图会因为某种原因使一切变得更大），但它仍然很明显。

代码明智我在html和css中都设置了大小：

<img src="assets/images/icon.png" height="27" width="28" />

我还使用这些元标记进行缩放（如果这有任何区别）。

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

此外..这与SO帖子中描述的问题几乎相同：sharp icons crystal clear android app 除了我有html / css这个问题。

我必须制作不同尺寸的图标，还是一个更大尺寸的图标？或者这是如何工作的？

链接到图标：http://i.imgur.com/u9wE0Cs.png