Favicon HTML

A sessão Head montou uma caixa inicial de metadados com charset, viewport, title e um link de folha de estilo. Um favicon é outro link prático no head: o ícone minúsculo que aparece na aba do navegador ao lado do título da página. Ajuda as pessoas a reconhecer seu site entre abas lotadas, favoritos e algumas listas de histórico. Você não o desenha com texto CSS — aponta o navegador para um arquivo de imagem pequeno.

O que é um favicon

Um favicon é um recurso de ícone do site. Os navegadores o buscam porque seu HTML (ou um palpite padrão como /favicon.ico) diz onde procurar. Páginas modernas costumam declará-lo explicitamente com um elemento link para que o caminho e o tipo de arquivo fiquem claros. O ícone deve permanecer simples e suficientemente quadrado para ser legível em tamanhos muito pequenos.

Resposta direta

No head do documento, adicione um link com rel="icon" e um href que aponte para o arquivo do ícone. Escolhas comuns são favicon.ico, um PNG como images/favicon.png, ou um ícone SVG. O caminho deve resolver da mesma forma que outras URLs relativas (veja Caminhos de arquivo). Depois de alterar o arquivo, espere cache do navegador — um refresh forçado ou uma janela privada costuma revelar o novo ícone mais rápido que um reload normal.

Link clássico .ico

Muitos tutoriais ainda começam com favicon.ico na mesma pasta do arquivo HTML. O atributo opcional type pode ajudar os navegadores a entender o recurso.

Lendo o exemplo clássico

• O link fica em head, ao lado de title e outros metadados
• rel="icon" marca o recurso como favicon
• href="favicon.ico" assume que o arquivo do ícone fica ao lado desta página HTML
• type="image/x-icon" é uma dica MIME comum para arquivos .ico
• Sem um caminho correto, a aba pode manter um ícone padrão ou vazio

Variantes PNG e SVG

Favicons PNG são fáceis de exportar de ferramentas de design. Favicons SVG permanecem nítidos em diferentes escalas quando o navegador os oferece suporte. Você pode manter o ícone numa pasta images e apontar o href para lá.

Escolhendo um formato inicial

• .ico — tradicional, amplamente reconhecido por ferramentas mais antigas
• .png — simples para iniciantes que já exportam assets PNG
• .svg — opção vetorial nítida quando os navegadores do seu público oferecem suporte
  Você não precisa de todo formato no primeiro dia. Entregue um ícone claro com um link correto e depois amplie para apple-touch ou pacotes multi-tamanho se o projeto exigir.

Caminhos importam tanto quanto a marcação

Se href aponta para um arquivo ausente, a requisição do favicon retorna 404 e o ícone da aba falha em silêncio. Confira nomes de pastas, ortografia e se o arquivo HTML foi movido sem o ícone. Caminhos relativos são relativos à URL do documento HTML, não à sensação de onde o arquivo “deveria” estar.

O cache pode esconder atualizações

Navegadores costumam cachear favicons de forma agressiva. Você altera favicon.png, recarrega e ainda vê a marca de ontem. Isso nem sempre significa que o HTML está errado. Tente um refresh forçado, uma janela privada/incógnito, ou renomeie temporariamente o arquivo e atualize o href para o navegador buscar uma URL nova. Ensine esse hábito cedo para que aprendizes não apaguem marcação que funciona por pânico.

Mantenha ícones pequenos e claros

Uma foto enorme comprimida numa aba vira um borrão ilegível. Prefira uma marca simples, alto contraste e uma tela quadrada. O favicon é ajuda de reconhecimento, não uma segunda imagem hero. Guarde o branding detalhado para o corpo da página.

Onde o link pertence

Coloque elementos link de favicon em head. Colocá-los em body é o lugar errado para ícones no nível do documento. Você já sabe que head é para metadados e links de recursos; favicons seguem essa regra.

Pratique no seu editor

1. Coloque um ícone quadrado pequeno ao lado do seu arquivo HTML ou dentro de uma pasta images.
2. Adicione <link rel="icon" href="..."> dentro de head com um caminho correspondente.
3. Abra a página e olhe a aba do navegador ao lado do texto do título.
4. Quebre o caminho de propósito, recarregue e note o ícone desaparecer ou reverter — depois corrija.
5. Substitua o arquivo do ícone e, se o antigo permanecer, abra uma janela privada ou faça hard-refresh para confirmar a nova arte.

Erros fáceis

• Colocar o link do favicon em body em vez de head
• href errado de modo que o ícone dá 404 enquanto o HTML da página ainda parece bem
• Esperar atualização visual instantânea enquanto um favicon antigo está em cache
• Usar uma fotografia enorme em vez de uma marca quadrada pequena e simples
• Esquecer de enviar o arquivo do ícone quando você faz deploy só do HTML
• Misturar rel="stylesheet" com rel="icon" e se perguntar por que o CSS ou o ícone da aba se comportam mal

Resumo

• Favicons são ligados em head com rel="icon"
• Aponte href para um arquivo real .ico, .png ou .svg
• Caminhos corretos e checagens calmas de cache resolvem a maioria dos relatos de “ícone ausente”
• Mantenha ícones pequenos e reconhecíveis no tamanho da aba
• Um link que funciona vale mais que um monte de formatos de ícone não usados