Um favicon é a pequena imagem que identifica um site nas guias e favoritos do navegador. O nome vem de “ícone favorito”. Oferece aos leitores uma maneira visual de encontrar um site entre as páginas abertas, mesmo quando uma guia é muito estreita para mostrar seu título. Os mecanismos de pesquisa também podem exibir o favicon de um site ao lado de um resultado. Definição de favicon do MDN descreve esses usos comuns do navegador.
O círculo segmentado laranja deSearchVector é um exemplo. O diagrama de capa usa seu ícone real para explicar a conexão entre um arquivo de imagem, o HTML de uma página e o navegador. É um diagrama de ensino, não uma captura de tela de um resultado de pesquisa.
Pronto para implementar um? Vá para a configuração HTML ou solução de problemas de ícones ausentes.
Favicon, logotipo e imagem social: qual é qual?
Um logotipo é a identidade visual mais ampla de uma empresa. Pode incluir um símbolo, um nome completo e um slogan. Um favicon é uma pequena aplicação dessa identidade, geralmente um símbolo simplificado que permanece reconhecível em tamanhos minúsculos. Reduzir uma marca nominativa inteira geralmente torna suas letras indistinguíveis.
| Ativo | Principal job |
|---|---|
| Favicon | Identificar a página em uma guia do navegador ou marcador |
| Logotipo do cabeçalho | Identificar a marca no layout da página |
| Visualização social imagem | Ilustre um link compartilhado com uma imagem maior |
| Ícone da tela inicial | Represente um site salvo ou aplicativo da web instalado em um dispositivo |
Alterar o logotipo do cabeçalho não atualiza necessariamente o favicon. Estes podem ser arquivos separados controlados por configurações diferentes. Da mesma forma, substituir uma imagem de visualização social não repara um ícone de guia ausente. Comece identificando a superfície que está errada e, em seguida, encontre a configuração que a fornece.
Escolha um ícone que resista a tamanhos pequenos
Comece com uma tela quadrada e uma silhueta simples. Exporte uma imagem de origem grande e visualize-a em 16×16 e 32×32 como uma verificação prática de design. Essas visualizações testam a legibilidade; eles não afirmam que todo navegador renderiza o ícone em um tamanho fixo. Procure traços que desaparecem, letras aglomeradas e áreas transparentes que se fundem com o plano de fundo da guia.
Revise a marca em fundos claros e escuros. Um contorno fino e escuro pode desaparecer em uma aba escura, enquanto um símbolo claro pode desaparecer em uma aba clara. Uma forma sólida com contraste deliberado costuma ser mais fácil de reconhecer. Não confie apenas na cor: um contorno distinto ainda ajuda quando os ícones são visualmente semelhantes.
Mantenha um arquivo fonte que sua equipe possa editar. Exportar uma cópia maior de uma miniatura desfocada não restaura seus detalhes. Para uma reformulação da marca, aprove o pequeno ícone ao lado do logotipo principal para que o site, os favoritos e os atalhos salvos pareçam relacionados.
Adicione um favicon com um exemplo HTML real
SearchVector exibe um PNG real de 512×512 em seu URL de imagem de favicon. Esta declaração mínima aponta para o ativo existente no site SearchVector:
Coloque a declaração dentro do do documento. O caminho relativo à raiz é resolvido a partir do nome do host atual: em SearchVector ele solicita /favicon.png de SearchVector; no seu domínio, ele solicita esse arquivo do seu domínio. Para o seu próprio site, carregue o ativo da sua própria marca e use o caminho real. Copiar a tag sem enviar a imagem deixa uma referência quebrada.
O atributo rel identifica o recurso como um ícone. O href o localiza, tipo descreve seu formato e tamanhos descreve as dimensões da imagem. Escrever “512x512” não redimensiona um arquivo. Inspecione a imagem exportada e mantenha a declaração precisa.
SearchVector também declara alternativas SVG e ICO. Os navegadores podem selecionar entre declarações de ícones usando atributos como tipo e tamanho, conforme explicado em Referência de link de ícone do MDN. Portanto, declarações múltiplas não são automaticamente um problema, mas alternativas desatualizadas podem explicar aparências inconsistentes.
Se você usa um CMS, comece com a configuração do ícone do site. Se você usar uma estrutura, use seu mecanismo de metadados estabelecido. Em seguida, inspecione o HTML resultante: um upload bem-sucedido em uma tela de administração é apenas uma parte do trabalho. Evite adicionar uma segunda configuração concorrente antes de verificar o que o modelo existente já produz.
O que Google precisa para aparência de pesquisa
A documentação favicon deA página inicial deve declarar o ícone. Googlebot precisa de acesso a essa página inicial e Googlebot-Image precisa de acesso ao arquivo de ícone. Mantenha o URL do ícone estável e use uma marca representativa do site. Google suporta um favicon por nome de host: um subdomínio pode ter o seu próprio, mas um subdiretório não recebe um favicon de pesquisa separado.
A elegibilidade não garante a exibição. Após uma alteração, Google precisa rastrear novamente e processar a página inicial; sua documentação diz que isso pode levar dias ou semanas. Os proprietários de sites podem solicitar a indexação da página inicial por meio da inspeção de URL. Renomear repetidamente a imagem não é um substituto útil para verificar o acesso e permitir o tempo de processamento.
Solucionar um favicon ausente ou desatualizado
Separe três observações: o que o HTML declara, o que o URL da imagem retorna e o que o navegador exibe. Uma incompatibilidade entre eles indica onde investigar. Mantenha um breve registro do URL da página, URL do ícone e resultado, em vez de alterar várias configurações de uma vez.
| Sintoma | Próximo verifique |
|---|---|
| Nenhum ícone em nenhuma página | Inspecione o cabeçalho para uma declaração de ícone; abra o URL da imagem diretamente |
| A página inicial funciona, o artigo não | Compare modelos e relativo à raiz versus relativo à página caminhos |
| Ícone antigo em um navegador | Compare um novo perfil de navegador e inspecione todas as alternativas declaradas |
| URL da imagem abre um página da web | Verifique se há redirecionamento, desafio de acesso ou resposta HTML substituta |
| O navegador funciona, a pesquisa não | Revise a declaração da página inicial, acesso de rastreamento e elegibilidade de pesquisa separadamente |
Uma resposta rotulada como 200 é insuficiente se o servidor enviar uma página de login ou um substituto HTML genérico. No painel Rede do navegador, inspecione o URL final da solicitação de ícone, o tipo de conteúdo da resposta e a visualização. Na verdade, um PNG deve ser decodificado como PNG. Verifique também se um CDN ainda está servindo um arquivo mais antigo após a atualização da origem.
Para uma investigação de cache, abra a imagem diretamente e compare-a com um novo perfil de navegador. Limpar o cache pode ajudar a isolar a causa, mas os usuários não devem precisar realizar uma redefinição especial para que o site funcione. Verifique o ativo implantado e a configuração do cache antes de tratar uma atualização local como correção permanente.
Exemplo resolvido: uma página aninhada perde seu ícone
Considere um site fictício cuja página inicial mostra o ícone certo, enquanto um artigo em /blog/ não. Ambos os modelos contêm href="favicon.png", sem a barra inicial. Supondo que não haja substituição de URL base, esse caminho relativo é resolvido ao lado da página atual. Pode funcionar na raiz ao solicitar um local diferente para o artigo.
O desenvolvedor abre a solicitação de ícone do artigo e descobre que ele retorna o substituto HTML do site em vez de uma imagem. A correção é confirmar se a imagem existe na raiz do site e alterar a declaração compartilhada para href="/favicon.png". Eles então verificam a página inicial e o artigo novamente. Ambos agora solicitam o mesmo ativo.
Este é um exemplo de diagnóstico resolvido, não um incidente SearchVector relatado. A lição é inspecionar o URL solicitado antes de substituir a arte. Uma imagem perfeitamente válida não pode ajudar se um modelo aninhado solicitar o arquivo errado.
Uma verificação final antes de fechar a tarefa
- Abra a página inicial e uma página aninhada; confirme se ambos declaram o ícone pretendido.
- Abra cada alternativa declarada e verifique se ela pertence à marca atual.
- Confirme os carregamentos de imagem pretendidos sem autenticação ou substituto de HTML.
- Inspecione o pequeno ícone no navegador claro e escuro aparências.
- Revise Google elegibilidade separadamente, registre a alteração e aguarde o tempo de processamento.
Para uma análise mais ampla do site, continue com o SearchVectordo Website Checker ou seu Web Page Crawler. Mantenha as verificações diretas de imagem e HTML acima como evidência de seu favicon; uma revisão geral da página não garante como um mecanismo de pesquisa exibirá sua marca.
Uma tarefa de favicon concluída possui uma imagem reconhecível, uma declaração correta e uma URL de recurso funcional em todos os modelos de página. Verifique essas peças de concreto primeiro. Em seguida, monitore a aparência da pesquisa sem confundir uma atualização atrasada com uma implementação de navegador quebrada.
