Cómo crear un favicon que no se vea borroso en una pantalla Retina

Un único favicon.ico pequeño solía bastar para toda la web. Hace años que no es así, y seguir tratándolo como suficiente es la razón de que tantos iconos se vean borrosos.

Por PulsarKit · Publicado el 8 de septiembre de 2026 · Actualizado el 16 de octubre de 2026

Un solo icono pequeño nunca iba a servir para todas las pantallas

Una pestaña del navegador, un acceso directo en la pantalla de inicio del teléfono y el icono de una app en la pantalla de un portátil de alta densidad piden tamaños de píxel distintos. Si estiras un mismo icono pequeño para que encaje en todos, se ve nítido en uno de esos lugares y blando en los demás. El favicon.ico tradicional, que los navegadores siguen pidiendo en la raíz del sitio, sigue siendo parte de la solución. Pero se creó para una web con una resolución de pantalla mucho más baja que la actual, y nunca se pensó como el único archivo implicado.

Por qué un conjunto completo de iconos necesita tantos archivos distintos

Un conjunto bien hecho, como el que genera Generador de favicon a partir de una sola imagen, cubre varios usos a la vez, no solo varios tamaños del mismo uso. Hay PNG de 16 y 32 píxeles para las pestañas del navegador en densidad normal y alta, un icono de 180 píxeles para cuando alguien añade el sitio a la pantalla de inicio del iPhone, y iconos de 192 y 512 píxeles que un manifiesto de app web progresiva tiene que declarar antes de que la app se pueda instalar. Cada tamaño existe porque algo pide justo ese tamaño. No es redundancia por capricho. Si omites uno, esa superficie concreta pasa a un sustituto más borroso o directamente a no mostrar nada.

El único archivo que a propósito no puede quedar transparente

iOS no compone un icono transparente de pantalla de inicio sobre un fondo coherente cuando alguien añade un sitio a su teléfono. Rellena cada zona transparente con negro sólido, así que un logotipo limpio sobre un fondo transparente se convierte en un recuadro oscuro y feo en cuanto llega a la pantalla de inicio. El icono pensado para ese lugar necesita que su transparencia se aplane sobre un color de fondo real de antemano, a propósito, en vez de dejarlo transparente como los otros tamaños del conjunto. Todos los demás iconos pueden mantener transparencia donde la tenga la imagen original, porque una pestaña del navegador o un acceso directo de escritorio la muestran correctamente.

Por qué una fuente vectorial produce un icono de 16 píxeles más nítido

Un logotipo construido como SVG (un logotipo plano en mapa de bits se puede vectorizar con PNG a SVG) se puede renderizar de nuevo en cada tamaño objetivo a partir de sus formas vectoriales, en lugar de generarlo una vez en grande y luego reducirlo una y otra vez para cada variante pequeña. La diferencia se nota sobre todo en el tamaño más pequeño del conjunto. Un logotipo muestreado a la baja desde un único mapa de bits maestro grande suele convertirse en una masa informe a 16 píxeles, y los trazos finos y los detalles delicados desaparecen. Una versión renderizada desde las curvas vectoriales en ese mismo tamaño pequeño mantiene los trazos definidos, porque nunca fue una imagen grande encogida. Se dibujó directamente a ese tamaño, y por eso un icono suelto se renderiza con SVG a PNG a las dimensiones exactas en píxeles, no con un programa para redimensionar. En un logotipo con un wordmark fino o un contorno muy sutil, eso marca la diferencia entre un icono que reconoces en la barra de pestañas y una mancha gris.

El icono «maskable» existe porque Android no respeta la forma del icono

Android recorta el icono de una app instalada a la forma que haya elegido ese dispositivo o ese launcher: un círculo, un cuadrado redondeado, un «squircle». Lo hace sin importar la forma con la que se dibujó el icono, así que un icono cuadrado normal puede perder contenido importante en los bordes, según la forma que se le aplique. Un icono maskable evita ese problema manteniendo todo su contenido significativo dentro de aproximadamente el ochenta por ciento central de la imagen. Así deja un margen seguro alrededor de cada borde, que cualquier forma puede recortar sin llevarse nada que importe en el diseño.

Errores habituales: una fuente pequeña y un conjunto que nunca se enlaza

Un conjunto de iconos borroso rara vez nace en el generador. Todos los tamaños se construyen a partir de una imagen maestra de 512 píxeles, así que cualquier fuente más pequeña se estira para llegar ahí, y una de menos de unos 260 píxeles tiene que crecer al doble o más, con lo que los tamaños grandes salen suaves. Parte de al menos 512 por 512, o mejor de un SVG; una fuente de menos de 32 píxeles se rechaza directamente. La segunda decisión es cómo un logotipo que no es cuadrado se vuelve cuadrado: recortar desde el centro mantiene la marca grande pero puede cortar un logotipo de texto ancho, mientras que encajar toda la imagen y rellenar los lados con un color lo deja todo visible a cambio de una marca más pequeña. Para un logotipo mucho más ancho que alto, una versión cuadrada solo con el símbolo suele ser mejor fuente que la composición completa. El tercer error ocurre después de generar. Los ocho archivos, nueve con el icono maskable, van en la raíz del sitio, y las etiquetas de head-snippet.html van en el head de cada página; si los archivos viven en una subcarpeta, edita los valores href del fragmento para que coincidan, o las etiquetas apuntarán a archivos que no están ahí. Por último, comprueba el icono de 16 píxeles en una pestaña real del navegador y no en un visor de imágenes: a ese tamaño un contorno fino o un logotipo de texto se convierte en una mancha gris, y la solución es una marca más simple, no una exportación más nítida.

Herramientas usadas en este artículo

Generador de faviconConvierte un solo logotipo en todo el conjunto de favicons: todos los tamaños PNG, un ICO con varios tamaños, un manifest y las etiquetas HTML para pegar en el head.

PNG a SVGConvierte un PNG en un SVG escalable en tu navegador. Sirve para logotipos e iconos planos con pocos colores, no para fotografías.

SVG a PNGConvierte archivos SVG a PNG a cualquier escala o con un tamaño exacto en píxeles en tu navegador. Se eliminan scripts y enlaces externos antes de dibujar nada.