UX del favicon: qué hace que un favicon sea excelente

Un gran favicon es una marca sencilla y de alto contraste, normalmente tu logotipo-símbolo o una o dos letras, que sigue siendo legible a 16x16 píxeles tanto en pestañas claras como oscuras del navegador, encaja con tu marca y rara vez cambia. Todo lo demás en esta guía (alineación de píxeles, color, margen, transparencia, tamaño de archivo) sirve a esos objetivos: que tu sitio sea fácil de encontrar al instante entre decenas de pestañas abiertas.

Un favicon es diminuto, pero aparece en muchos lugares: pestañas del navegador, barras de marcadores, listas del historial, el menú de búsqueda de pestañas, los resultados de búsqueda de Google en móvil y escritorio, y las pantallas de inicio de los teléfonos. Para los usuarios con muchas pestañas abiertas, el título suele quedar truncado hasta desaparecer y el icono es la única pista que queda. Eso lo convierte en un auténtico elemento de navegación, no en una simple decoración.

1. Legibilidad a 16x16

El tamaño clásico de un favicon es de 16x16 píxeles CSS. En una pantalla estándar son literalmente 256 píxeles; en una pantalla retina 2x, el navegador suele elegir una imagen de 32x32 para el mismo espacio. Todo lo que diseñes tiene que sobrevivir a esta reducción.

Mantenlo simple

• Una forma o una o dos letras. Funciona una sola letra en negrita, un círculo con un símbolo o una marca geométrica sencilla. Tres letras o una palabra se convertirán en ruido.
• Un único punto focal. Si no puedes describir el icono en cinco palabras, es demasiado complicado.
• Sin degradados, sombras ni texturas finas. A tamaños pequeños se convierten en manchas borrosas.

Alinea con la cuadrícula de píxeles

A 16x16, una línea situada medio píxel fuera de la cuadrícula se suaviza (antialiasing) a lo largo de dos filas de píxeles y se ve gris y borrosa. Coloca los bordes en límites de píxel completos y usa anchuras pares cuando la forma sea simétrica. Si exportas desde una herramienta vectorial, activa el ajuste a píxeles, o revisa el resultado reducido y corrígelo a mano.

Evita las líneas finas

Los trazos de menos de 2 píxeles a 16x16 (alrededor del 12 por ciento del ancho del icono) tienden a desaparecer o a parpadear entre tamaños. Engrosa los trazos, elimina los detalles interiores y une los huecos pequeños. Un glifo en negrita, algo pesado, suele leerse mejor que una miniatura fiel de un logotipo detallado.

Retoca a mano

Los archivos ICO y PNG no tienen hinting como las fuentes tipográficas, así que la edición manual de píxeles es el equivalente: ajustas píxeles individuales para que las curvas, las diagonales y los contraformas (los huecos de letras como "a" o "e") se mantengan nítidos. La reducción automática es un buen primer borrador, pero unos pocos píxeles colocados a mano suelen marcar la diferencia entre una mancha y una letra reconocible. El editor de píxeles de MakeFav está pensado para esto: abre el lienzo de 16x16, corrige los píxeles problemáticos y exporta.

2. Contraste en pestañas claras y oscuras

Hoy en día es habitual que los navegadores funcionen en modo oscuro, y muchos usuarios tienen barras de pestañas que difieren del tema de la página. Un icono azul marino oscuro con fondo transparente puede quedar perfecto en una pestaña blanca y casi invisible en una gris oscuro. Prueba siempre ambas.

Soluciones prácticas

• Añade una forma de fondo. Un cuadrado redondeado o un círculo sólido en un color de marca garantiza que la marca tenga su propio contraste, sea cual sea la pestaña.
• Usa un contorno fino o un halo. Un borde más claro de 1 px alrededor de un glifo oscuro (o al revés) mantiene visible la silueta en cualquiera de los dos temas, pero a 16x16 debe seguir siendo nítido, así que pruébalo.
• Elige colores de marca de tono medio. Colores como el azul intenso, el naranja, el verde o el magenta suelen funcionar tanto sobre superficies blancas como casi negras. El amarillo muy claro o el azul marino muy oscuro son los arriesgados.
• Usa un favicon SVG adaptable. Un SVG puede incluir una media query prefers-color-scheme para que el icono cambie con el tema del sistema.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Ten en cuenta que la media query refleja el tema del sistema operativo o del navegador, que es lo que normalmente sigue la barra de pestañas, aunque no siempre. La compatibilidad con los favicons SVG también varía: Chrome y Firefox los admiten, mientras que Safari ha ido históricamente por detrás, así que conserva siempre alternativas en PNG o ICO. Un diseño con fondo sólido es la opción más robusta porque no necesita ninguna lógica de tema.

3. Reconocibilidad y coherencia de marca

Usa el logotipo-símbolo (el símbolo o monograma), no el logotipo completo con el nombre escrito. El texto dentro de un icono de 16x16 es ilegible, y un logotipo horizontal alargado reducido a un cuadrado te deja con una pequeña franja en el centro.

• Si tu marca tiene un símbolo, simplifícalo para tamaños pequeños en lugar de limitarte a reducirlo. Una "versión favicon" con menos detalles es una práctica habitual.
• Si tu marca es solo un logotipo tipográfico, toma la primera letra o una pareja de letras distintiva y compónla con la tipografía de tu marca en un peso alto.
• Mantén los colores coherentes con tu logotipo, el icono de tu app y tus avatares en redes sociales, para que el usuario reconozca la misma marca en todas partes.

La singularidad importa tanto como la fidelidad. Mira una fila de pestañas: si otros tres sitios también usan un círculo azul, el tuyo no destacará. Una forma o un color diferentes resultan más útiles que una reducción perfectamente fiel.

4. Color: una paleta limitada y saturada

Con tan pocos píxeles, cada color adicional añade desorden. Apunta a uno o dos colores y, como mucho, blanco o negro. Los colores saturados se aprecian mejor a tamaños pequeños que los pasteles, que tienden a confundirse con el fondo de la pestaña.

Toma prestado algo del pensamiento sobre accesibilidad. Las WCAG piden al menos un contraste de 3:1 para los objetos gráficos significativos (criterio de conformidad 1.4.11, Contraste no textual). Un favicon no está cubierto formalmente, ya que es parte de la interfaz del navegador y no del contenido de la página, pero un 3:1 entre el glifo y su fondo, y entre el icono y la pestaña, es un objetivo sensato. Evita también transmitir información solo mediante el tono: las variantes roja y verde del mismo icono son indistinguibles para muchos usuarios con daltonismo, así que varía la forma o añade un símbolo.

5. Forma, margen y zonas seguras

Llena el cuadrado

Las pestañas del navegador muestran el favicon a un tamaño pequeño fijo, así que un margen extra solo hace más pequeña tu marca. Para los iconos de pestaña estándar, aprovecha la mayor parte del lienzo, con solo uno o dos píxeles de aire, para que la marca sea lo más grande posible.

¿Redondeado o cuadrado?

Los navegadores, por lo general, no recortan los favicons de las pestañas, así que la forma que dibujas es la forma que ven los usuarios. Un cuadrado con las esquinas ligeramente redondeadas queda pulcro y ofrece un fondo coherente; un glifo libre o un círculo sobre transparencia puede verse más ligero y distintivo. Ambos son válidos. Elige uno y mantén coherente todo tu conjunto de iconos.

Iconos Apple touch

iOS añade sus propias esquinas redondeadas al apple-touch-icon (el tamaño habitual es 180x180). Proporciona un cuadrado a sangre completa, sin esquinas ya redondeadas; de lo contrario, podrían aparecer franjas oscuras o blancas visibles en las esquinas.

Iconos maskable para Android y PWA

El sistema operativo recorta los iconos maskable en círculos, squircles u otras formas. Mantén todo el contenido importante dentro de la zona segura: un círculo centrado en el icono con un radio del 40 por ciento del ancho del icono. Extiende el color de fondo hasta los bordes para que cualquier máscara quede bien. No reutilices como icono maskable un favicon de pestaña ajustado de borde a borde, porque la máscara lo recortaría.

6. Transparencia

La transparencia es adecuada para los favicons de pestaña, y es lo que permite que un icono formado solo por un glifo quede limpio sobre cualquier color de pestaña. Es un problema para los iconos Apple touch: iOS rellena las zonas transparentes con un color sólido (normalmente negro), lo que puede arruinar el diseño. Da siempre al apple-touch-icon un fondo opaco en el color de tu marca. Lo mismo vale para los iconos maskable y para la mayoría de los usos en la pantalla de inicio de Android, donde un fondo opaco da resultados predecibles.

7. Estabilidad: no lo cambies con demasiada frecuencia

Un favicon genera reconocimiento mediante la repetición. Cambiarlo con frecuencia obliga a los usuarios a volver a aprender cuál es tu pestaña, y además causa quebraderos de cabeza técnicos. Los navegadores almacenan en caché los favicons de forma agresiva, y Google los obtiene y guarda por separado de tus páginas, por lo que un icono nuevo puede tardar días o semanas en aparecer en los resultados de búsqueda. Google también pide una URL de favicon estable, un icono cuyo tamaño sea múltiplo de 48 píxeles (48x48, 96x96, etc.) y un archivo que pueda rastrear (no bloqueado por robots.txt). Trata un cambio de favicon como una decisión del nivel de un rebranding, no como una decoración de temporada.

8. Estados de notificación y favicons dinámicos

Algunas aplicaciones web cambian el favicon para indicar mensajes sin leer, el estado de una grabación o un error. Bien hecho, es útil; en exceso, resulta irritante.

• Usa una insignia pequeña (un punto o un recuento corto) en una esquina, no un rediseño completo. El icono base debe seguir siendo reconocible.
• Hazlo con moderación. Reserva las insignias para eventos que requieran una acción del usuario. No animes el icono de forma continua.
• Limita los números. A 16x16 solo son legibles uno o dos dígitos; muestra "9+" o un simple punto en lugar de "137".
• Restablécelo enseguida cuando el usuario haya atendido el elemento, y recupera el icono por defecto.
• No dependas solo del color. Un punto rojo debería ir respaldado también por el título de la página, como "(3) Bandeja de entrada", para que la información esté disponible para todos.

Los favicons dinámicos suelen dibujarse en un canvas y sustituirse actualizando el href del elemento link del icono. Limita la frecuencia de las actualizaciones, porque cambiar constantemente el favicon puede consumir CPU y distraer a los usuarios.

9. Rendimiento

Los favicons son pequeños, pero siguen siendo peticiones que pueden hacerse mal.

• Mantén los archivos pequeños. Un favicon PNG suele pesar entre unos cientos de bytes y unos pocos kilobytes. Un SVG sencillo puede ocupar menos de 1 KB.
• Evita los archivos ICO inflados. Un ICO multitamaño con imágenes de 16, 32 y 48 píxeles es suficiente. Incrustar una imagen de 256x256 multiplica el tamaño del archivo sin ningún beneficio visible en las pestañas del navegador.
• Configura las cabeceras de caché. Sirve los iconos con una vigencia larga de Cache-Control, por ejemplo public, max-age=31536000, immutable, y usa un nombre de archivo versionado o con hash cuando los cambies.
• Declara los iconos de forma explícita. Los navegadores solicitan /favicon.ico por defecto, así que proporciona uno aunque declares otros iconos, para evitar ruido de errores 404 en tus registros.
• Comprime. Pasa los PNG por un optimizador sin pérdida y minifica los SVG.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Si quieres generar todos estos archivos a partir de una única imagen de origen, el generador de favicons de MakeFav produce el conjunto estándar, y la página para desarrolladores explica las opciones de integración.

10. Accesibilidad

Un favicon no tiene texto alternativo y los lectores de pantalla no lo anuncian, por lo que las herramientas tradicionales de accesibilidad, como los atributos alt, no se aplican. Lo que sí importa:

• El título de la página transmite el significado. Escribe elementos <title> únicos y descriptivos. No dependas nunca del icono para comunicar un estado; replica cualquier insignia en el título.
• Visibilidad para usuarios con baja visión. Un contraste alto, una forma en negrita y una marca grande ayudan a quienes recorren las pestañas con la vista.
• Independencia del color. Asegúrate de que sean las formas o las letras las que distingan los estados, no solo el tono.
• Menos distracciones. Evita los favicons parpadeantes o animados, que pueden suponer un problema para usuarios sensibles al movimiento.

Lista de verificación de UX del favicon

Lista de verificación de pruebas

No te fíes de la vista previa grande de tu herramienta de diseño. Prueba el icono real en condiciones reales:

1. Varios navegadores. Comprueba Chrome, Firefox, Safari y Edge, ya que cada uno elige iconos y tamaños de forma ligeramente distinta.
2. Modo claro y oscuro. Cambia el tema del sistema operativo y del navegador y mira la barra de pestañas cada vez.
3. Pantallas retina y estándar. Comprueba en un monitor 1x y en una pantalla 2x o 3x, y haz zoom en el navegador.
4. Barra de marcadores. Guarda la página como marcador y comprueba si el icono sigue siendo legible junto a otros sitios.
5. Muchas pestañas. Abre 20 pestañas y comprueba si encuentras la tuya de un vistazo.
6. Vista previa en la SERP de Google. Revisa un resultado de búsqueda móvil una vez que se haya vuelto a rastrear el icono. Recuerda que la actualización puede tardar.
7. Pantalla de inicio. Añade el sitio a la pantalla de inicio de iOS y Android y confirma que el icono no está recortado, no tiene esquinas negras y no es demasiado pequeño dentro de su máscara.
8. Comprobación técnica. Pasa tu dominio por el verificador de favicons de MakeFav para confirmar que los archivos existen, devuelven un estado 200, tienen los tamaños correctos y están declarados correctamente en tu HTML.

Un flujo de trabajo práctico

1. Parte de tu logotipo-símbolo y simplifícalo hasta una forma o una letra.
2. Crea un lienzo cuadrado con un fondo sólido o con forma que funcione en ambos temas.
3. Exporta los tamaños 32x32 y 16x16 y retoca a mano la versión pequeña en el editor de píxeles.
4. Genera el conjunto completo (ICO, PNG, apple-touch-icon, iconos del manifiesto) con el generador.
5. Añade las etiquetas link, configura las cabeceras de caché, despliega y verifica con el verificador.

Un favicon es uno de los recursos más pequeños de tu sitio y uno de los que más se ven. Unas pocas decisiones cuidadosas sobre contraste, simplicidad y coherencia hacen que funcione en cada pestaña, tema y dispositivo.

Preguntas frecuentes

¿Qué tamaño debe tener un favicon?

Diseña para 16x16 y 32x32 para las pestañas del navegador (el navegador usa 32x32 en pantallas de alta densidad), proporciona un apple-touch-icon de 180x180 para iOS y PNG de 192x192 y 512x512 para Android y PWA. Para los resultados de búsqueda de Google, usa un icono cuadrado cuyo tamaño sea múltiplo de 48 píxeles, como 48x48 o 96x96. Una fuente SVG escala a todos ellos.

¿Debo usar mi logotipo completo como favicon?

Normalmente no. Los logotipos completos con nombre escrito son demasiado detallados y demasiado anchos para un icono cuadrado de 16x16. Usa el logotipo-símbolo o un monograma de una o dos letras, y simplifícalo para que siga siendo reconocible cuando sea diminuto.

¿Cómo hago que un favicon funcione en modo oscuro?

El enfoque más seguro es darle al icono su propia forma de fondo sólida o un contorno contrastado, para que no dependa del color de la pestaña. Como alternativa, usa un favicon SVG con una media query prefers-color-scheme para intercambiar colores, y conserva alternativas PNG o ICO para los navegadores que no admiten iconos SVG. Prueba siempre en los temas claro y oscuro.

¿Por qué no aparece mi nuevo favicon?

Los navegadores almacenan en caché los favicons durante mucho tiempo, y Google guarda su propia copia, que actualiza según su propio calendario, a menudo tardando días o semanas. Actualiza la página forzando la recarga, borra la caché del navegador, usa un nombre de archivo versionado nuevo y asegúrate de que las etiquetas link y un /favicon.ico en la raíz apuntan al archivo correcto. Puedes verificar la configuración con el verificador de MakeFav.

¿Es buena idea mostrar insignias de notificación en un favicon?

Sí, si se usan con moderación. Un punto pequeño o un recuento de uno o dos dígitos ayuda a los usuarios a advertir algo que requiere acción, pero la animación constante o los números grandes perjudican la legibilidad y la atención. Replica siempre el estado en el título de la página, restablece el icono por defecto cuando se haya atendido el elemento y no dependas solo del color.