Guia Prático para Implementação de Favicon em Sites: Ficheiros, Declarações e Atualização de Cache

Um pacote padrão de favicon contém 5 tipos de ficheiros, que se adaptam a diferentes dispositivos e navegadores. O formato ICO favicon.ico é um formato tradicional, maioritariamente nos tamanhos 16×16, 32×32 e 48×48. Colocá-lo na raiz do site permite o reconhecimento automático por versões mais antigas do IE.

Ícones de vários tamanhos em formato PNG são utilizados em navegadores modernos e dispositivos móveis, com tamanhos comuns incluindo 16×16, 32×32 e 180×180. O apple-touch-icon foi projetado especificamente para o iOS Safari, para exibir um ícone nítido quando o utilizador adiciona o site ao ecrã principal. O ficheiro de manifesto Web fornece configuração de ícones para aplicações PWA, adaptando-se ao cenário de adição ao ecrã principal em sistemas Android.

A ordem de declaração segue a regra de compatibilidade retroativa: declarar primeiro os formatos modernos com maior prioridade, e depois recorrer aos formatos tradicionais. A ordem específica é: declarar primeiro o ícone no formato PNG 32×32, depois o apple-touch-icon e, por último, o favicon no formato ICO.

Todas as etiquetas link precisam de ter o atributo rel correto e o atributo size. Os ícones PNG requerem o atributo sizes para marcar o tamanho correspondente. O apple-touch-icon tem como padrão 180×180, pelo que pode ser omitida a marcação extra de tamanho. O ficheiro de manifesto precisa do atributo rel="manifest" que aponta para o caminho do ficheiro correspondente.

Ao utilizar o App Router no Next.js 13+, é necessário colocar o favicon.ico na raiz do diretório app, e o Next.js processa automaticamente a saída da rota. Os ficheiros PNG de vários tamanhos, apple-touch-icon e o ficheiro de manifesto podem ser colocados no diretório app/public, e referenciados com um caminho de raiz absoluto. Se utilizar o Pages Router, pode colocar todos os ficheiros diretamente na raiz do diretório public.

Ao implementar um favicon para um tema personalizado WordPress, pode colocar todos os ficheiros de favicon na subpasta de ativos do diretório do tema, ou carregá-los diretamente para a raiz do site, depois adicionar as declarações de etiquetas link correspondentes através do ficheiro functions.php do tema. Algumas versões do WordPress suportam o carregamento de favicons através do menu Aparência → Personalizar no painel de administração, e o sistema gera automaticamente as declarações e os caminhos.

Os navegadores implementam cache forte de longo prazo para os favicons dos sites, com a maioria dos navegadores de ambiente de trabalho a ter um período de cache superior a 7 dias. Após modificar o favicon, simplesmente atualizar a página não aciona o navegador a voltar a pedir o novo ficheiro, o que faz com que o ícone antigo continue a ser exibido.

O método de atualização mais fiável consiste em adicionar um parâmetro de consulta de versão ao URL do recurso do favicon. Por exemplo, altere href="/favicon.ico" para href="/favicon.ico?v=2". Após a alteração do parâmetro, o navegador trata-o como um novo recurso e pede diretamente o ficheiro mais recente, contornando o cache original. Também pode limpar o cache do navegador e voltar a visitar a página, mas este método só é adequado para depuração local por desenvolvedores, e não afeta o cache dos utilizadores finais.

Após a implementação, é necessário verificar o estado de exibição do ícone em vários cenários para confirmar o efeito de adaptação um a um. Primeiro, verifique a exibição do ícone no separador do navegador de ambiente de trabalho, e confira se os tamanhos 16×16 e 32×32 estão nítidos. Em segundo lugar, verifique a exibição do ícone na barra de marcadores do navegador, e confirme que a adaptação de tamanho está correta.

Os dispositivos móveis requerem a verificação de dois cenários: exibição do ícone após adicionar o site ao ecrã principal no iOS Safari, e exibição do ícone após adicionar um PWA Android ao ecrã principal. Por último, verifique o código-fonte do site para confirmar que todos os caminhos das etiquetas link estão corretos, e que não existem erros 404 causados por caminhos relativos incorretos. Pode utilizar o painel de rede nas ferramentas de desenvolvedor do navegador para confirmar que todos os ficheiros de ícone devolvem o código de estado 200.