Un favicon se ve borroso en una pestaña porque el espacio mide unos 16 píxeles de ancho, es decir, 256 píxeles en total, y un logo diseñado en un lienzo grande tiene más detalle del que cabe ahí. Exportarlo más nítido no sirve. Lo que sirve es dibujar menos: una letra o un símbolo, trazos gruesos en relación con el icono y mirar el resultado a su tamaño real antes de publicarlo. Qué archivos y tamaños publicar lo cubre la guía de tamaños de favicon; esta página trata de lo que va dentro de ellos.
¿Por qué un favicon se ve borroso en la pestaña?
Pasan dos cosas, y solo una es culpa del diseño.
La primera es aritmética. Una línea de un píxel de ancho en 16 píxeles es una dieciseisava parte del icono. Si cae justo sobre la cuadrícula de píxeles se ve nítida; si cae entre dos filas, como suele pasar con una línea reducida desde un dibujo más grande, se reparte entre ambas a media intensidad y se lee como una mancha gris. Las curvas y las diagonales tienen el mismo problema a lo largo de todo su recorrido.
La segunda es el escalado. El navegador elige una imagen de los archivos que le das y la redimensiona al espacio disponible. MDN describe la elección como basada en media, type y sizes de los candidatos, así que qué entrada te toca es decisión del navegador, no tuya. En una pantalla de alta densidad un espacio de 16 píxeles suele ser de 32 píxeles de dispositivo, de modo que un archivo que solo contiene una imagen de 16 píxeles se estira y se suaviza. Un favicon.ico que también guarde una imagen de 32 píxeles le da al navegador un mejor punto de partida, y por eso el generador de favicon escribe imágenes de 16, 32 y 48 píxeles en un solo archivo. Un escalado de pantalla irregular, como el 125 o el 150 por ciento de un sistema operativo, puede forzar un remuestreo incluso con los tamaños correctos, así que cierta suavidad en algunas pantallas no siempre se puede arreglar.
¿Qué sobrevive a 16 píxeles?
Son reglas prácticas que salen de cómo se comportan los píxeles, no un estándar:
- Una forma o un carácter. Dos o tres formas simples son el techo antes de que el icono se vuelva textura.
- Trazos de al menos una novena parte del ancho, es decir, dos píxeles o más a 16. Todo lo más fino depende de caer exactamente en la cuadrícula.
- Una forma rellena en lugar de un contorno. Un cuadrado o un círculo sólido conserva sus bordes cuando todo lo que hay dentro de un contorno se ha disuelto.
- Dos colores, con una diferencia fuerte entre ellos. Los degradados y las sombras suaves se convierten en bandas.
- Un poco de espacio en los bordes. La propia ayuda del generador dice que el aire ayuda a un logo cargado a 16 píxeles y que demasiado lo hace desaparecer, así que es un equilibrio y no una regla.
Una prueba rápida antes de cualquier programa: entrecierra los ojos frente al logo a la distancia de un brazo, o redúcelo en pantalla hasta que sea una miniatura. Lo que todavía se reconoce es el favicon. Lo que desapareció era decoración y no debería estar en el icono.
¿Por qué un logotipo con texto falla donde una sola forma funciona?
Un logotipo con texto gasta su ancho en letras. Cuatro letras en 16 píxeles dejan unos cuatro píxeles cada una, y los huecos dentro de una e o una a, las contraformas, son de un píxel como máximo, así que se rellenan y las letras se funden en la misma mancha. Una sola forma recibe los 16 píxeles completos y puede ser sólida.
La respuesta habitual es tomar la primera letra, o el símbolo del logo, y usarlo solo. El modo de letra del generador sigue la misma lógica: pone un carácter al 62 por ciento del tamaño del icono, dos al 50 por ciento y tres al 40 por ciento, y su propia ayuda llama mancha a tres caracteres a 16 píxeles. Si el nombre de tu marca empieza con una letra que se parece a muchas otras, un símbolo geométrico simple servirá mejor que una letra.
El contraste importa tanto como la forma, porque no controlas la barra de pestañas que hay detrás del icono. Un glifo oscuro sobre fondo transparente desaparece en un tema oscuro del navegador. Un fondo de color sólido dentro del icono protege de eso. El verificador de contraste mide dos colores entre sí; el 3:1 de WCAG para objetos gráficos es una referencia razonable para la forma frente a su relleno, aunque ese criterio se escribió para el contenido de la página, no para el marco del navegador. La guía de la relación de contraste explica de dónde sale la cifra.
¿Cómo pruebas un icono a tamaño real?
- Mira el archivo de 16 píxeles, no la vista previa grande. El generador lista el PNG de 16 por 16 con la imagen a tamaño real. Juzga por esa fila, no por la versión de 512 píxeles, que siempre se verá bien.
- Revisa los dos temas del navegador. Abre una ventana privada con un tema claro y otra con uno oscuro. Un icono que desaparece en cualquiera de los dos necesita un fondo.
- Ponlo en una pestaña de verdad. Sube los archivos, abre la página y mira la pestaña junto a las de otros sitios. Los favicons se guardan en una caché aparte de la de la página, así que usa una ventana privada para ver lo que el servidor envía ahora; el checklist de favicon lo recorre paso a paso.
- Prueba una segunda pantalla. Un teléfono o una portátil con otra densidad de píxeles muestra la versión escalada que tu monitor principal puede esconder.
- Pide a alguien que lo encuentre. Abre cinco pestañas y pide a un colega que señale la tuya. Si duda, la forma no es lo bastante distinta.
Lo que el generador puede y no puede arreglar
El generador toma una sola fuente, una imagen o una letra, y la escala a todos los tamaños. Con una imagen la reduce a la mitad repetidamente hasta acercarse al tamaño final y da el último paso desde ahí, lo que mantiene los bordes mejor que un único redimensionado, y ofrece margen interno y un fondo sólido. Eso es todo lo que hace con el dibujo.
No simplifica un logo por ti y no dibuja una versión aparte de 16 píxeles. Si el icono importa, redibujar el tamaño pequeño a mano, con los trazos alineados a la cuadrícula, superará cualquier reducción automática; la herramienta no puede hacerlo, y un .ico hecho a mano tendría que publicarse como archivo propio. En el modo de letra los PNG usan una fuente de sistema en negrita de tu equipo, así que las formas de las letras dependen de lo que tenga tu computadora, y el SVG opcional nombra una fuente en lugar de incrustarla, por lo que puede verse distinto en otro equipo. Nada en el .ico se adapta a un tema oscuro; solo un icono SVG con una regla de esquema de color puede hacerlo, y la herramienta no escribe ninguno. Los archivos se construyen en tu navegador, así que el logo no se sube a ningún sitio.
Para ver cómo aguanta tu propia marca, ponla en el generador de favicon y mira primero la fila de 16 píxeles. Si se lee ahí, los tamaños mayores se arreglan solos.
Una fuente vectorial facilita la simplificación, porque puedes redimensionar y editar sin perder nada; por qué un logo debería ser un SVG explica por qué.
Preguntas frecuentes
¿Por qué mi favicon se ve borroso en la pestaña del navegador?
El espacio de la pestaña mide unos 16 píxeles de ancho, así que las líneas finas, el texto pequeño y el detalle de un logo más grande no se pueden dibujar con limpieza. En pantallas de alta densidad, además, un archivo que solo contiene una imagen de 16 píxeles se estira. Simplifica el dibujo a una forma sólida e incluye una imagen de 32 píxeles en el .ico.
¿Qué debe llevar un favicon: mi logo completo o solo una parte?
Solo una parte, normalmente una letra o un símbolo. Un logo completo con texto tiene más detalle del que caben en 256 píxeles, así que las letras se funden en una mancha. Elige el único elemento que la gente ya reconoce y deja que llene el icono.
¿Qué grosor deben tener las líneas de un favicon?
No hay un estándar, pero como regla práctica mantén los trazos en unos dos píxeles o más en un icono de 16 píxeles. Una línea de un píxel solo se ve nítida si cae exactamente en la cuadrícula, y una línea reducida desde un dibujo más grande rara vez lo hace. Las formas rellenas evitan el problema.
¿Por qué mi favicon desaparece en un tema oscuro del navegador?
Un icono oscuro sobre fondo transparente casi no tiene contraste con una barra de pestañas oscura, y un .ico normal no cambia con el tema. Dale al icono una forma de fondo sólida en un color que destaque tanto en barras claras como oscuras, y compruébalo en cada tema.
Última actualización 2 de noviembre de 2026
