Mejores Prácticas
Aprende a crear favicons efectivos que funcionen bien en todas las plataformas y navegadores
Pautas de Diseño
Longitud del Texto
Los caracteres individuales funcionan mejor. Los favicons se muestran en tamaños muy pequeños (16×16 a 32×32 píxeles), por lo que uno o dos caracteres son más legibles. El texto más largo se vuelve ilegible y desordenado.
Selección de Fuente
Elige fuentes que permanezcan claras en tamaños pequeños:
- Las fuentes sans-serif en negrita funcionan mejor que las fuentes delgadas o decorativas
- Las fuentes geométricas (como Bebas Neue, Oswald) mantienen la claridad cuando se reducen - puedes cargarlas desde Google Fonts
- Evita fuentes de escritura o manuscritas a menos que uses caracteres individuales muy grandes
- Las fuentes personalizadas de Google Fonts están totalmente soportadas y funcionan en todos los formatos de exportación
Contraste de Color
El alto contraste es esencial. Asegúrate de que el color del texto destaque claramente sobre el fondo. El texto claro sobre fondos oscuros (o viceversa) funciona mejor. Evita tonos similares que se mezclen en tamaños pequeños.
Simplicidad
Mantén la simplicidad. Los diseños complejos, degradados o detalles finos se pierden en tamaños de favicon. Enfócate en un símbolo o letra clara y reconocible que represente tu marca.
Recomendaciones Técnicas
Selección de Formato
SVG (Scalable Vector Graphics): SVG (Gráficos Vectoriales Escalables): Usa para navegadores modernos. SVG se escala perfectamente a cualquier tamaño sin pérdida de calidad. Mejor opción para pantallas de alta resolución y aplicaciones web progresivas.
PNG: PNG: Usa como respaldo para navegadores antiguos o cuando necesites una imagen raster de tamaño fijo. El PNG de 256×256 funciona bien para la mayoría de casos de uso.
ICO: ICO: Formato heredado, pero aún requerido para algunos navegadores antiguos y accesos directos de Windows. Inclúyelo para máxima compatibilidad.
Requisitos de Tamaño
Diferentes plataformas requieren diferentes tamaños:
- 16×16, 32×32, 48×48: Iconos de pestaña de navegador estándar
- 96×96: Accesos directos de escritorio y marcadores
- 180×180: Icono táctil de Apple (pantalla de inicio de iOS)
- 192×192, 512×512: Iconos de Aplicación Web Progresiva (PWA)
El paquete "Descargar Todo" incluye todos los tamaños necesarios para compatibilidad completa.
Compatibilidad del Navegador
Enfoque moderno: Usa SVG como formato principal con respaldos PNG/ICO. La mayoría de navegadores modernos (Chrome, Firefox, Safari, Edge) soportan favicons SVG. Para máxima compatibilidad, incluye tanto formatos SVG como ICO en tu HTML.
Pruebas
Siempre prueba tu favicon en diferentes navegadores y dispositivos. Verifica cómo aparece en pestañas del navegador, marcadores, pantallas de inicio móviles y accesos directos de escritorio. Asegúrate de que permanezca reconocible en los tamaños más pequeños.
Errores Comunes a Evitar
- Usar demasiado texto que se vuelve ilegible en tamaños pequeños
- Elegir combinaciones de colores de bajo contraste que se mezclan
- Usar diseños excesivamente complejos con detalles finos
- Olvidar incluir múltiples tamaños para diferentes plataformas
- No probar en diferentes navegadores y dispositivos
- Usar fuentes o contenido con derechos de autor sin la licencia adecuada