Resumo (TL;DR)
- A validação é importante: Um favicon quebrado causa erros 404 nos logs do servidor e degrada a imagem da marca.
- Análise abrangente: Esta ferramenta rastreia seu site como um navegador para verificar
favicon.ico, ícones PNG, Apple Touch Icons e Web Manifests. - Feedback acionável: Obtenha relatórios específicos sobre acessibilidade de arquivos, incompatibilidade de dimensões e validade de formato.
Por que validar favicons?
Implantar um favicon parece simples, mas é propenso a falhas silenciosas. Ecossistemas modernos (Desktop, Android, iOS) têm requisitos diferentes.
- Cache do navegador: Navegadores locais armazenam favicons em cache agressivamente, escondendo problemas que novos visitantes veem.
- Padrões fragmentados: Você precisa de mais do que apenas
favicon.ico. Dispositivos Apple procuramapple-touch-icon. Android e PWAs procuramsite.webmanifest. - Configuração do servidor: Caminhos corretos no HTML não adiantam se o servidor retornar 403 ou o tipo MIME errado.
O que é verificado
Nosso analisador realiza uma auditoria em várias etapas:
- Parsing HTML: Escaneamos o
<head>em busca de todos os links de ícones declarados. - Validação de Manifesto: Verificamos se os tamanhos declarados no Web Manifest correspondem aos arquivos reais.
- Acessibilidade: Tentamos baixar cada ícone para verificar se retorna
200 OK. - Formato e Dimensões: Inspecionamos dados binários para garantir que o arquivo é uma imagem válida e que as dimensões correspondem.
- Descoberta implícita: Verificamos convenções padrão como
/favicon.ico.
Falhas comuns de implantação
1. O Ícone “Fantasma”
Você tem uma tag <link>, mas o arquivo retorna 404. Correção: Verifique se o caminho do arquivo está correto em relação à raiz do domínio.
2. Incompatibilidade de Formato
Você declara type="image/png" mas serve um JPEG ou ICO. Correção: Garanta que o cabeçalho Content-Type do servidor corresponda ao formato real.
3. Mentira sobre Dimensões
O HTML diz sizes="32x32", mas a imagem real é 16x16. Isso causa desfoque. Correção: Use o Gerador de Favicon para produzir tamanhos exatos.
4. Falta o Apple Touch Icon
O iOS não usa o favicon padrão. Sem apple-touch-icon, o ícone da tela inicial será uma captura de tela genérica. Correção: Inclua sempre um PNG 180x180 para a Apple.
Melhores Práticas
- Fallback na Raiz: Tenha sempre um
favicon.icona raiz (/favicon.ico). - SVG para Modernos: Use favicon SVG (
type="image/svg+xml") para alta resolução. - Manifesto: Defina ícones distintos no
manifest.json. - Cache Busting: Use query strings (ex:
?v=2) ao atualizar.
FAQ
Por que o verificador diz “Ausente” quando eu consigo ver?
Seu navegador provavelmente tem uma versão antiga em cache. O verificador vê o que um novo visitante vê.
Preciso mesmo de todos esses arquivos?
favicon.ico é o mínimo. Mas para uma aparência profissional em dispositivos móveis e telas de alta densidade, o conjunto completo é o padrão da indústria.
Posso usar um CDN?
Sim. Apenas certifique-se de que as tags <link> apontem para a URL absoluta no CDN.