Favicons animados e alternativas ICO estáticas

Um favicon animado precisa ser testado nos navegadores de destino. O ImgConvert cria uma alternativa ICO estática a partir do primeiro quadro de um GIF. Não há opção de preservar animação nem saída de ICO animado.

O que é um Favicon Animado?

Um favicon (abreviação de "favorite icon") é o pequeno ícone exibido na aba do navegador, nos favoritos e na barra de endereços. Um favicon animado vai um passo além, percorrendo múltiplos quadros e criando efeitos de movimento visíveis na aba do navegador.

Casos de uso comuns:

• Indicadores de notificação — Pulsação ou piscar para sinalizar novas mensagens
• Animações de carregamento — Um ícone girando enquanto o conteúdo é processado
• Expressão de marca — Uma sutil animação de logotipo que comunica personalidade
• Eventos especiais — Ícones animados temporários para feriados ou promoções

Prepare um primeiro quadro legível

Escolha um símbolo simples, reconhecível em 16×16 ou 32×32. Se o GIF começar vazio ou com uma transição, salve um quadro adequado em um editor. O conversor não tem seletor de quadros.

Princípios de Design para Animações

São pontos de partida para criar animação em outro editor, não controles nem limites do conversor ICO. Ajuste o tempo ao movimento e evite piscadas desnecessárias.

Manter Simples

Os melhores favicons animados usam contenção. Em 16×16 a 32×32 pixels, complexidade vira ruído visual:

• Máximo 2-4 quadros para a maioria dos efeitos
• Movimento simples — pulso, piscar, rotação ou deslizamento
• Silhueta clara em cada quadro
• Temporização lenta — 500ms ou mais por ciclo de quadro

Temporização por Tipo de Animação

A Regra do Primeiro Quadro

O conversor usa o primeiro quadro para o ICO estático. Ele precisa funcionar sozinho mesmo que a animação implementada separadamente não seja reproduzida:

• Marca reconhecível sem contexto
• Clara tanto em 16×16 quanto em 32×32 pixels
• Bom contraste contra a interface do navegador clara e escura
• Sem texto (ilegível em tamanhos de favicon)

Processo de Criação Passo a Passo

São pontos de partida para criar animação em outro editor, não controles nem limites do conversor ICO. Ajuste o tempo ao movimento e evite piscadas desnecessárias.

Passo 1: Projete seus Quadros

Crie 2-4 quadros distintos para sua animação.

Passo 2: Exporte os Quadros Individualmente

Exporte cada quadro como PNG de 32×32 pixels:

• Exporte PNG com canal alfa quando precisar de um quadro transparente.
• Mantenha fundos transparentes onde necessário
• Aponte para menos de 5KB por quadro

Passo 3: Monte o GIF

Combine quadros em um GIF animado:

Crie o pacote ICO estático

1. Abra GIF para ICO e selecione um GIF de até 20 MB.
2. Escolha 16, 32, 48, 64, 128 ou 256 px. A seleção inicial é 32, 64 e 128.
3. Converta, baixe e extraia icons.zip.
4. Use um ICO individual ou favicon.ico, que reúne todos os tamanhos escolhidos. São versões da mesma imagem estática, não quadros de animação.

Imagens retangulares são ajustadas proporcionalmente ao quadrado, com margem transparente. O fundo opaco da fonte permanece. Para um pacote com PNGs e manifesto, use Favicon Generator.

Instale a alternativa no site

Ao publicar o arquivo na raiz do site, você pode referenciá-lo no head:

<link rel="icon" href="/favicon.ico">

Ajuste o caminho à sua publicação. O conversor não instala arquivos nem altera seu site. Veja a referência de icon da MDN.

Quando o ícone precisa se mover

Guarde a animação original. Usar uma imagem animada como favicon ou alternar quadros com JavaScript exige uma implementação separada no site. A reprodução em um visualizador não garante animação em abas, favoritos ou atalhos. Teste os navegadores necessários e mantenha uma alternativa estática legível.

Exemplo de JavaScript para seu site

O autor do site pode experimentar a troca da URL de um link favicon existente. É código separado do site: enviar um GIF aqui não instala animação nem modifica sua página. Prepare um arquivo estático por quadro e comece com um ícone que funcione sozinho.

O exemplo alterna duas URLs PNG a cada 500 ms enquanto a página está visível e para quando ela fica oculta ou há preferência por movimento reduzido. Ele demonstra o mecanismo, sem garantir animação em todas as abas, favoritos ou atalhos do sistema. Teste no destino real.

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

Quando Usar (e Não Usar) Favicons Animados

Bons Casos de Uso

Maus Casos de Uso

Otimização de Desempenho

Use poucos quadros, pare a animação quando ela deixar de ser relevante e compare a página com e sem ela. Um temporizador mais rápido não significa um ícone melhor. Evite temporizadores duplicados. Ao integrar em um componente, limpe os eventos e temporizadores na desmontagem; o exemplo é para uma página independente.

O guia Page Visibility da MDN explica o sinal usado. A animação deve complementar um aviso acessível dentro da página, pois o ícone pode passar despercebido ou não ser anunciado.

Confira o resultado

• Abra a URL publicada e confira os tamanhos pequenos.
• Se o ícone antigo persistir, revise as declarações de ícone e o cache.
• Teste a animação separadamente do ICO estático.

Teste os navegadores e dispositivos necessários, com sessões novas e cache existente. Confira primeiro quadro, animação separada, movimento reduzido e retorno de uma aba oculta. Veja o ícone em 16×16 e 32×32 nas interfaces clara e escura. Se a animação falhar, mantenha a alternativa estática. O tamanho desejado é um orçamento do projeto, não um limite universal.

Perguntas frequentes

Selecionar vários tamanhos preserva a animação?

Não. Todos usam o primeiro quadro. Não existe opção Preserve Animation.

Posso escolher outro quadro aqui?

Não. Prepare uma imagem estática em outro editor; se salvar em PNG, use PNG para ICO.

Por que o ícone antigo continua aparecendo?

Confira se a URL publicada funciona, procure declarações concorrentes e compare sessões novas e com cache. Abas, favoritos e atalhos instalados podem usar arquivos ou caches diferentes. Alterar um link não substitui todos os ícones salvos.

CSS sozinho anima o ícone da aba?

Animar uma imagem dentro da página com CSS não anima diretamente o ícone do navegador. Vincular um arquivo animado ou trocar URLs com JavaScript são implementações separadas que exigem testes.

Quanto movimento usar?

Apenas o necessário para comunicar o estado. Um indicador estático pode ser mais claro. Evite piscadas rápidas, mantenha uma imagem reconhecível e confira movimento reduzido. Avalie o tempo no tamanho real, não apenas em uma prévia ampliada.