Como colocar favicon no HTML: link rel="icon" com exemplos

Para colocar um favicon no HTML, adicione uma tag link com rel="icon" dentro do head da página, apontando para o arquivo do ícone. O navegador lê essa tag e mostra o ícone na aba, nos favoritos e na lista de abas abertas. Se você não declarar nada, ele tenta o arquivo favicon.ico na raiz do site, mas declarar a tag dá controle sobre qual arquivo usar.

O código mínimo

<link rel="icon" href="/favicon.ico" sizes="any">

Coloque a linha dentro de head, antes do fechamento. O caminho começa com barra, então vale a partir da raiz do site. Se o arquivo estiver numa pasta, por exemplo imagens, escreva o caminho completo: href="/imagens/favicon.ico".

Um ícone para cada uso

Um site costuma precisar de mais de um ícone. Estes são os mais comuns:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

• O favicon.ico com sizes="any" cobre os navegadores mais antigos.

• O SVG deixa o ícone nítido em qualquer tamanho. Em alguns casos ele também pode mudar de cor no modo escuro.

• O apple-touch-icon é o ícone que o iPhone e o iPad usam na tela de início.

• O webmanifest aponta para os ícones de 192 e 512 px usados para instalar o site como aplicativo.

Você não precisa de todos. Para um site pequeno, o favicon.ico e o apple-touch-icon já cobrem a maior parte dos casos.

Erros comuns

• Caminho relativo errado. Se a página estiver em uma subpasta, href="favicon.ico" procura o arquivo na subpasta. Use a barra inicial para evitar isso.

• Tipo errado. Um PNG declarado como image/svg+xml não aparece. Confira o type de acordo com o arquivo.

• Cache. O navegador guarda o ícone por dias. Para testar uma troca, abra o site numa aba anônima.

• Arquivo grande. O favicon deve ser pequeno e leve. Um ícone de vários megabytes atrasa a página sem ganho visível.

Como conferir

Abra o site numa aba anônima e veja se o ícone aparece. Depois, abra o código da página e procure por rel="icon" para confirmar que a tag está no head e que o caminho responde. Se o arquivo abrir pelo endereço direto, mas não aparecer na aba, o problema costuma ser o cache.

Resumo

Uma tag link com rel="icon" dentro do head resolve a maior parte dos casos. Se quiser cobrir iPhone, instalação e telas de alta densidade, acrescente o apple-touch-icon e o webmanifest.

Fonte

Convenções de rel="icon", apple-touch-icon e webmanifest, com exemplos da ferramenta de favicon do site.