← tetraedroVOLUMA · marca

Favicon animado

Mira la pestaña de este navegador ahora mismo. El icono se está moviendo, y no es un GIF: es un canvas que se repinta y reemplaza el href del favicon 25 veces por segundo. Es la única técnica que anima el icono en Chrome y Safari. Abajo está lo que sí y lo que no funciona, medido.

Vivo · lo mismo que está corriendo en la pestaña

El GIF · mismo movimiento, en archivo

Qué anima y dónde · sin optimismo

Técnica	Chrome	Safari	Firefox	Pestaña de fondo
GIF animado como favicon	No	No	Sí	Sí, donde anima
SVG con animación	No	No	No	No
Canvas + href por cuadro	Sí	Sí	Sí	Casi no

La ironía que decide el asunto: el favicon se ve sobre todo cuando la pestaña está en segundo plano, que es justo cuando el navegador frena o apaga requestAnimationFrame. O sea que la técnica que funciona en todos lados anima únicamente cuando ya estás mirando la página, donde el icono es lo de menos. Y la que anima en segundo plano solo corre en Firefox.

Además, un favicon en movimiento tiene un problema de significado antes que técnico: en la barra de pestañas, algo que se mueve se lee como aviso. Es el gesto que usan los chats para decir "tienes un mensaje". Una marca que se agita todo el tiempo gasta esa señal sin tener nada que avisar.

Y no sobrevive donde el icono queda congelado de todos modos: marcadores, historial, pestaña anclada, atajo en el escritorio y el ícono al compartir. Todos esos toman un solo cuadro.

La medición · por qué 32 y no 16

La marca son tres caras separadas, así que sobrevive solo mientras se distingan tres manchas de tinta. Rastericé el ciclo completo y conté las islas cuadro por cuadro, con el mismo umbral que aplica el navegador al aplanar el antialias:

Tamaño	Hueco	Cuadros con 3 islas
16 px	18%	casi ninguno, se fusionan	No
16 px	32%	91%	Parpadea
32 px	20%	60 de 60	Sí

A 16 px la marca mide 11 píxeles de ancho y no caben tres caras con dos costuras: no es cuestión de afinar, es que no hay resolución. Por eso el archivo va a 32 px, que es además lo que pide Chrome en pantalla retina. El de 16 va estático.

Un detalle del formato: el GIF tiene que cerrar el ciclo, así que no puede usar el movimiento sin repetición del lab. Usa frecuencias en razón entera (2:3:1) para que el último cuadro empate con el primero. Es la única diferencia entre el archivo y lo que ves en la pestaña.

Recomendación

Favicon estático, y el movimiento en la página. El logo animado se luce en el encabezado del sitio y en las pantallas del venue, que es donde alguien lo está viendo de verdad. En la pestaña, un icono quieto se lee como marca y uno que se mueve se lee como notificación.

Dicho eso, el GIF ya está hecho y verificado. Si lo quieres poner, en Firefox se va a ver girando y en el resto se va a ver el primer cuadro, que es una marca correcta de todos modos.