Buenas prácticas de favicon

Longitud del texto

Un solo carácter funciona mejor. El favicon se ve muy pequeño (de 16×16 a 32×32 píxeles), así que uno o dos caracteres se leen con más claridad. Un texto más largo se vuelve ilegible y recargado.

Elección de la fuente

Elige fuentes que sigan siendo legibles a tamaños pequeños:

• Fuentes en negrita: Funcionan mejor que los grosores finos o light
• Fuentes sans-serif: Suelen leerse mejor a tamaños pequeños
• Evita las decorativas o de caligrafía: al reducirlas dejan de leerse
• Comprueba la visibilidad: Previsualiza siempre el favicon a tamaño real (16×16 píxeles) antes de darlo por cerrado

Contraste de color

Usa un contraste alto entre texto y fondo. El favicon aparece sobre fondos de navegador muy distintos (claros, oscuros, de color), así que el diseño debe verse en todos. Evita colores parecidos que se funden a tamaños pequeños.

Simplicidad

Mantén el diseño sencillo y sin recargar. Los detalles complejos desaparecen a tamaños pequeños. Céntrate en un único elemento visual claro que represente tu marca o tu sitio.

Elección del formato

Tamaños necesarios

Ofrece varios tamaños para que se vea bien en cualquier dispositivo y contexto:

• 16×16 píxeles: Tamaño habitual de la pestaña del navegador
• 32×32 píxeles: Pantallas de alta densidad y algunos contextos del navegador
• 180×180 píxeles: Apple touch icon para la pantalla de inicio de iOS
• 192×192 y 512×512 píxeles: Iconos de la pantalla de inicio de Android y soporte PWA

Nota: diseña siempre al tamaño mayor (512×512) y reduce, en lugar de ampliar desde un tamaño pequeño. Así se mantiene la calidad en todos los tamaños.

Compatibilidad con navegadores

Prueba el favicon en varios navegadores (Chrome, Firefox, Safari, Edge) y dispositivos (escritorio, móvil, tableta). Cada uno puede tratarlo de forma un poco distinta; probarlo a fondo ayuda a que se vea igual en todos.

Usar el logotipo completo

Evita el logotipo entero de la empresa salvo que sea muy simple. La mayoría tiene demasiado detalle para reconocerse a 16×16 píxeles. Mejor una versión simplificada, un monograma o un símbolo clave de la marca.

Poco contraste

Si hay poco contraste entre elementos, a tamaños pequeños el diseño desaparece. Asegura contraste suficiente para que se vea en distintos temas y fondos del navegador.

Archivos mal colocados

Los archivos deben estar en el directorio correcto (normalmente public o static) y las etiquetas link del HTML deben apuntar a esas rutas.

Faltan tamaños

Un solo tamaño limita la compatibilidad. Incluye varios (16×16, 32×32, 180×180, 192×192, 512×512) para que se vea bien en todos los dispositivos y contextos.

No probarlo

Prueba siempre el favicon en varios navegadores y dispositivos antes de publicarlo. Lo que se ve bien en uno puede fallar en otro. Usa las herramientas de desarrollo del navegador para comprobar que carga.