Favicons e web app manifest: quais arquivos publicar e como declará-los

O que é

O HTML Standard diz que, na ausência de um link com a palavra-chave icon, um user agent pode buscar /favicon.ico relativo à URL do documento e usá-lo como ícone. Por isso uma requisição a esse caminho aparece em todo log de acesso, e por isso o arquivo deve existir mesmo quando os ícones são declarados. Os ícones declarados usam <link rel="icon" href="..." sizes="..." type="...">; quando vários são declarados, o padrão determina que o user agent deve escolher o mais apropriado segundo os atributos type, media e sizes, e, entre os igualmente apropriados, vale o último declarado. Contextos instalados e fixados (pinned) leem o web app manifest, cujo array icons lista objetos com src, sizes (48x48 96x96) e purpose. A MDN documenta os valores de purpose: any (padrão), maskable (projetado para máscaras de ícone e com uma zona segura, de modo que a plataforma possa cortar as bordas) e monochrome (o canal alfa é usado como máscara sobre um preenchimento sólido). Para os resultados de busca, a documentação do Google afirma que há suporte a um favicon por site, sendo que um site corresponde a um hostname, que o ícone deve ser quadrado e ter no mínimo 8x8px, com recomendação de mais de 48x48px, que a URL do favicon deve ser estável e que tanto o arquivo do ícone quanto a página inicial devem poder ser rastreados (crawlable).

Por que importa

Os ícones são pequenos, mas aparecem em todo lugar: abas, favoritos, telas iniciais, resultados de busca, seletores de tarefas. Um ícone ausente ou errado é percebido pelos usuários e não custa nada corrigir uma única vez, ao passo que uma declaração quebrada pode persistir por anos porque nada falha.

Como aplicar

• Publique /favicon.ico (um ICO com vários tamanhos), um ícone SVG declarado com rel="icon" type="image/svg+xml", um PNG para navegadores sem suporte a ícones SVG e um PNG apple-touch-icon no tamanho especificado pela documentação da Apple.
• Adicione um manifest com pelo menos dois tamanhos de PNG (um ícone de launcher e um grande para splash screens), nos tamanhos documentados pelas plataformas de destino; forneça um ícone maskable separado, com a arte dentro da zona segura, em vez de reutilizar o ícone any.
• Sirva o manifest com o media type correto e declare-o com <link rel="manifest"> em todas as páginas, não apenas na página inicial.
• Mantenha as URLs dos ícones estáveis; quando a arte mudar, mantenha o caminho e deixe os caches expirarem, ou troque o caminho em todos os lugares ao mesmo tempo.
• Verifique com o painel de aplicação do navegador e requisitando cada URL declarada com curl.

Armadilhas

Declarar ícones que retornam 404 ou redirecionam para HTML. Usar um ícone maskable cujo logotipo toca as bordas, que as plataformas acabam cortando. Bloquear /favicon.ico ou o manifest no robots.txt.