这个问题我碰到过不少次，核心原因是高DPI屏幕的设备像素比（devicePixelRatio）：比如常见的2倍屏（像1080p/1440p的笔记本或高分辨率显示器），会把1个CSS像素渲染成2个物理像素。你的54x54 PNG被缩到25px后，浏览器为了适配物理像素会做平滑缩放，自然就模糊了；而低分辨率屏幕的设备像素比接近1:1，图标刚好匹配物理像素，所以显示清晰。

除了更换大尺寸PNG，你可以试试这几个实用方案：

1. 用CSS image-rendering强制像素化渲染 #

这个属性能控制浏览器缩放图像时的算法，对于像素风格的图标，强制保持像素边缘，避免模糊：

#icon {
  line-height: 26px;
  display: block;
  color: #3f3f3f;
  text-decoration: none;
  padding-left: 25px;
  font-weight: normal;
  background: url("你的图标URL") left center no-repeat;
  background-size:25px;
  /* 核心属性：强制像素化渲染 */
  image-rendering: pixelated;
  /* 兼容旧浏览器的备选属性 */
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
}

pixelated会让图像缩放时保留像素块的清晰度，很适合小图标；crisp-edges是更通用的清晰渲染选项，多写几个前缀能覆盖更多浏览器。

2. 替换为SVG矢量图标 #

如果你的图标可以导出为SVG格式，这是最优解——矢量图基于数学路径绘制，无论缩放多少倍都不会模糊，完美适配所有分辨率屏幕。

修改后的CSS只需要替换背景图地址为SVG链接，background-size依然可以用25px：

#icon {
  /* 其他样式保持不变 */
  background: url("你的SVG图标URL") left center no-repeat;
  background-size:25px;
}

很多设计工具（比如Figma、Sketch）都能直接把PNG导出为SVG，也可以用在线工具转换现有PNG（复杂图标转换后可能需要微调路径）。

3. 利用device-pixel-ratio媒体查询适配 #

如果不想换图也不想用image-rendering，可以针对高DPI屏幕调整背景图的显示逻辑：比如在2倍屏上，把background-size设为50px（25px × 2），再通过缩放把图标缩回到CSS的25px尺寸，让图标在物理像素上接近原尺寸，避免拉伸模糊：

#icon {
  /* 默认低DPI屏幕样式 */
  background-size:25px;
  padding-left:25px;
}

/* 针对2倍及以上DPI屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #icon {
    background-size:50px;
    padding-left:50px;
    transform: scale(0.5);
    transform-origin: left center;
  }
}

这个方法需要调整布局相关属性（比如padding、transform-origin）来保证图标位置正确，相对麻烦一点，但能在不换图的前提下解决模糊问题。

内容的提问来源于stack exchange，提问作者Kimberlee Ho