A Tag de Link rel="icon" Explicada
A tag <link rel="icon"> no <head> de uma página informa ao navegador qual arquivo usar como favicon. href aponta para a imagem, type informa seu tipo MIME e sizes lista as dimensões em pixels que o arquivo contém para que o navegador possa escolher a melhor correspondência. Você pode incluir várias tags de link de ícone (uma por tamanho ou formato), e o navegador escolhe a mais adequada.
As quatro coisas que a tag carrega
rel="icon" declara a relação: este arquivo é um ícone para o documento. href é o caminho para a imagem. type é o tipo MIME (image/x-icon, image/png, image/svg+xml), que permite ao navegador pular um formato que não consegue usar. sizes lista as dimensões que o arquivo contém, como "32x32", ou "any" para um SVG escalável.
O navegador lê todas as tags de link de ícone no head, depois escolhe a que melhor se encaixa na superfície que está desenhando: a aba, um favorito, um bloco maior. É por isso que um head do mundo real carrega várias dessas tags em vez de uma, e por que todas pertencem ao head, antes do body.
Um conjunto moderno de links de ícone
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Cinco tags, cada uma voltada a um consumidor diferente. O navegador ignora as que não entende e escolhe a melhor entre as demais.
O que cada atributo faz
| Atributo | Finalidade |
|---|---|
| rel | A relação: "icon" para um favicon, "apple-touch-icon" para iOS |
| href | O caminho para o arquivo de imagem |
| type | O tipo MIME, para que o navegador possa pular formatos que não consegue renderizar |
| sizes | As dimensões que o arquivo contém, ex.: "32x32", ou "any" para SVG |
Perguntas frequentes sobre rel="icon"
Preciso do atributo type em um link de ícone?
É opcional, mas útil. type permite ao navegador pular um formato que não consegue usar sem baixá-lo primeiro. Vale a pena incluir em links PNG e SVG, e é inofensivo em todos os outros lugares.
Posso ter mais de uma tag de link de ícone?
Sim, e geralmente você deve. Declarar vários tamanhos e formatos permite que cada superfície escolha a correspondência mais próxima em vez de reduzir uma imagem grande para a aba e ampliá-la para a tela inicial.
Onde a tag de link vai?
No <head> do documento. O navegador solicita o favicon enquanto analisa o head, então uma tag colocada no body chega tarde demais para ser usada no primeiro carregamento.