Um favicon HTML fiável depende de um pequeno conjunto de ficheiros acessíveis e ligações no head, não de uma etiqueta mágica. Este procedimento abrange separadores modernos, clientes antigos e atalhos móveis sem multiplicar variantes históricas.
Preparar os ficheiros
Comece com um símbolo quadrado e legível em tamanhos muito pequenos. Coloque favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest e os PNG referenciados pelo manifesto na pasta pública servida na raiz do domínio.
Um caminho como /favicon.svg é absoluto em relação ao domínio. Continua, por isso, correto em /produits ou /blog/article, ao contrário de favicon.svg, que pode ser resolvido relativamente à página.
Adicionar as etiquetas ao head
Declare primeiro o SVG com rel icon e o tipo image/svg+xml, depois o ICO com rel icon e sizes any. Adicione rel apple-touch-icon para iOS e rel manifest para as instalações da aplicação web.
O tipo deve corresponder ao ficheiro realmente servido. Não mude o nome de um PNG para .ico: o conteúdo e o cabeçalho do ficheiro devem ser os do formato ICO.
| Utilização | Relação | Ficheiro |
|---|---|---|
| Navegador moderno | icon | /favicon.svg |
| Compatibilidade | icon | /favicon.ico |
| Ecrã iOS | apple-touch-icon | /apple-touch-icon.png |
| Aplicação web | manifest | /site.webmanifest |
Publicar sem quebrar os caminhos
Abra diretamente cada URL de ficheiro após a publicação. A resposta deve ser uma imagem ou um manifesto, com um estado de sucesso, e não uma página HTML de início de sessão ou de erro 404 devolvida com um estado enganador.
Se o site estiver num subdiretório, adapte os caminhos ou a base pública. Verifique a página final nas ferramentas de programação: o navegador deve pedir os URL esperados, sem redirecionamento para outro servidor.
Verificar o resultado
Recarregue a página com a cache desativada e inspecione as etiquetas link no DOM produzido. Teste depois um separador, um favorito e, se necessário, a adição ao ecrã principal num dispositivo real.
O favicon de um resultado de pesquisa também segue as regras do motor e o seu calendário de rastreio. Um ícone visível no navegador não garante, por isso, uma atualização imediata nos resultados.
Fontes primárias
Perguntas frequentes
A etiqueta de favicon fica no body?
Não. Os elementos link que descrevem os ícones e o manifesto pertencem ao head do documento.
Basta um favicon.ico na raiz?
É uma boa alternativa de recurso, mas não descreve o ícone Apple Touch nem os ícones instaláveis do manifesto. Declare os formatos adequados a essas utilizações.
Porquê usar um caminho que começa por /?
Parte da raiz do domínio e evita que uma página num nível inferior procure o ficheiro na sua própria pasta.