Favicons Animados (GIF e JavaScript)
Um favicon animado geralmente é um GIF animado usado como ícone; o Firefox e alguns builds do Chromium o reproduzem na aba, enquanto o Safari e outros mostram apenas o primeiro quadro. Os sites usam a animação principalmente para sinalizar atividade ao vivo (um spinner, uma contagem de não lidos, um ponto de gravação), muitas vezes trocando o ícone via JavaScript em vez de depender de um GIF. Para uma marca, um ícone estático é mais claro e mais amplamente suportado.
O suporte é irregular, então trate-o como um aprimoramento
Um GIF animado referenciado como favicon é reproduzido no Firefox e em alguns builds do Chromium, mas o Safari e vários outros renderizam apenas o primeiro quadro. Então a animação nunca pode ser essencial: o que quer que o ícone precise dizer tem que ser legível apenas nesse primeiro quadro.
Por causa disso, a maioria dos favicons "animados" por aí não são GIFs. São um script redesenhando o ícone a partir de um canvas e trocando o href da tag de link: um spinner enquanto algo carrega, um ponto vermelho durante a gravação, ou uma contagem de não lidos pintada sobre a marca. Isso dá controle preciso e funciona pelo mesmo mecanismo de troca de link em todo lugar.
A rota JavaScript para status ao vivo
Para mostrar um selo de não lidos ou um ponto de status, desenhe cada estado em um canvas, exporte-o e defina o href do link do favicon para o resultado. O navegador atualiza o ícone da aba na hora. É assim que apps de e-mail e chat colocam um número na aba, e isso degrada graciosamente para um ícone estático onde o scripting está desativado.
Perguntas frequentes sobre favicon animado
Favicons animados funcionam no Chrome e no Safari?
O suporte é inconsistente. O Firefox anima favicons GIF, o Chromium tem sido irregular, e o Safari normalmente mostra apenas o primeiro quadro. Nunca conte com a animação ser vista.
Como mostro uma contagem de não lidos no favicon?
Desenhe o ícone mais o selo em um canvas em JavaScript, depois defina o href do link do favicon para a saída do canvas. Atualize-o sempre que a contagem mudar. É a mesma técnica que apps de e-mail e chat usam.
Devo usar um favicon animado?
Para uma marca, não. Um ícone estático é mais claro e universalmente suportado. Reserve a animação para status ao vivo genuíno, e implemente isso com uma troca de link em JavaScript em vez de um GIF.