Hacer un Favicon que No Se Vea Como Basura
Ese ícono diminuto en la pestaña del navegador importa más de lo que piensas.
Abre las pestañas de tu navegador ahora mismo. ¿Cuántas puedes identificar solo por el favicon?
Probablemente la mayoría. Ese cuadrado de 16x16 píxeles está haciendo un trabajo serio para el reconocimiento de marca. La G colorida de Google. El pájaro de Twitter. El octocat de GitHub. Los conoces al instante.
Luego está tu sitio con el ícono de página en blanco por defecto. O peor, un logo que se veía genial a 500 píxeles pero se convierte en una mancha irreconocible a 16.
Por Qué los Favicons se Ignoran
La mayoría de la gente diseña su logo, construye su sitio y recuerda el favicon a último minuto. "Solo encoger el logo" parece razonable. Rara vez funciona.
Un logo detallado a 16x16 píxeles se convierte en lodo. El texto es ilegible. Las líneas finas desaparecen. Los colores se mezclan.
Los buenos favicons están diseñados para tamaños pequeños, no adaptados de los grandes.
Qué Funciona en Tamaños Diminutos
Formas simples. Una sola letra. Una forma geométrica básica. Algo reconocible en 2 segundos.
Alto contraste. Oscuro sobre claro o claro sobre oscuro. Los degradados sutiles desaparecen en tamaños pequeños.
Líneas gruesas. Los trazos delgados desaparecen. Las formas gruesas y claras sobreviven la reducción.
Colores limitados. Dos o tres máximo. Las paletas complejas se convierten en ruido.
Los Tamaños que Realmente Necesitas
Los navegadores, sistemas operativos y dispositivos todos solicitan diferentes tamaños:
- 16x16 - Pestañas del navegador (el crítico)
- 32x32 - Barra de tareas, accesos directos
- 48x48 - Escritorio Windows
- 180x180 - Ícono táctil Apple
- 192x192 - Android Chrome
- 512x512 - Pantallas de inicio PWA
Podrías crear cada tamaño manualmente. O usar un generador que produzca todos desde una imagen fuente.
Errores Comunes
Usar tu logo completo. ¿"RunToolz" como texto a 16 píxeles? Ilegible. Usa la porción del ícono, o crea una versión simplificada.
Olvidar el modo oscuro. Tu ícono negro desaparece en temas oscuros del navegador. Considera agregar un borde sutil o hacer una versión clara.
Ignorar el fondo. Algunos contextos muestran favicons sobre blanco, otros sobre oscuro, otros sobre tu color elegido. Prueba los tres.
Fuente de baja resolución. Comienza con al menos 512x512. Escalar hacia abajo funciona. Escalar hacia arriba crea desenfoque.
Proceso Rápido
- Comienza con tu logo o marca
- Simplifica al elemento más reconocible
- Haz que funcione a 16x16 primero
- Escala hacia arriba desde ahí, agregando detalle solo donde ayuda
- Prueba en pestañas de navegador reales, no solo tu herramienta de diseño
Un favicon es uno de esos pequeños detalles que separa sitios pulidos de los aficionados. Toma 10 minutos hacerlo bien. Hace una diferencia cada vez que alguien mira sus pestañas.