¿Qué pasa con este icono?

Creé un ícono para una página web con líneas de 2px y dimensiones 42x42(px) pero cuando lo coloco en la página web las líneas se ven borrosas, vea la imageningrese la descripción de la imagen aquí

El siguiente es el ícono que estoy desarrollando con las líneas correctasingrese la descripción de la imagen aquí

¿Cómo puedo hacer las líneas para que no se vean borrosas?

Como mencionó @Naty, en su ejemplo anterior, la muestra roja es 42x42 y tiene líneas nítidas. Sin embargo, la imagen de muestra en blanco sobre negro es de solo 35x35. Si su imagen no se presenta en su tamaño original en el navegador, es muy probable que se vea borrosa como resultado. Debe diseñar su ícono para que sea perfecto en píxeles en el tamaño que desea que se muestre.

Respuestas (2)

Su problema es que no está diseñando un pixe perfectícono y no lo está cargando en el tamaño exacto.
La solución fácil es simplemente cargar un svg, y hay 2 opciones para eso:

  1. Cargar e icono .svg
  2. Convertir el ícono en una fuente, que es básicamente lo mismo que cargar un svg en el sitio web. (En realidad subes un svg a las fuentes de los iconos)

La única razón real para pasar de cargar un svg a fuentes de íconos es si tiene un conjunto de íconos que se cargan una y otra vez en varias partes del sitio web.

Gracias por la ayuda, ahora veré cómo hago el icono de pixel perfect
@OsmanyRodríguez esto podría ayudar: photoshoptutorials.ws/photoshop-tutorials/layouts/…
gracias por la ayuda ya pude arreglar todos los iconos

Intente convertir su ícono en una fuente que debería solucionar el problema borroso.

Revisa este enlace:

http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/

Luego puedes modificar el tamaño con CSS.

Espero que funcione.

Gracias por su respuesta, también lo haré, pero el problema es que estoy incrustando la imagen en un tema ya creado, por lo que, lamentablemente, es un png lo que necesito usar :( Tal vez pueda aportar una solución para el borroso ¿líneas en el png? Gracias por su tiempo.
Las fuentes también tienen suavizado, por lo que esto no solucionará necesariamente el problema.
¿Qué pasa con este icono?
RespuestasAquíPolítica de privacidad1y, 1v