Como Adicionar um Favicon em HTML (E Quais Tags rel Usar)

Adicionar um favicon ao seu site deveria ser uma das tarefas mais simples no desenvolvimento web, mas causa problemas aos desenvolvedores com mais frequência do que você imagina. Entre conselhos conflitantes sobre quais tags <link> usar, valores confusos de atributos rel e navegadores que teimosamente mantêm o ícone antigo em cache, fazer um favicon realmente aparecer pode parecer um jogo de adivinhação.

A verdade é que a configuração de favicon para a maioria dos sites pode ser reduzida a um único arquivo e uma única tag HTML. Este guia corta o ruído e dá exatamente o que você precisa: a configuração mínima prática, as variações mais úteis de tags rel e instruções claras para lidar com problemas de cache que tornam seu novo favicon invisível.

Se você ainda não tem um arquivo favicon.ico, crie um com o Any2ICO em menos de um minuto. Ele aceita PNG, SVG, JPG, WebP e outros formatos, e produz um arquivo ICO multi-tamanho que funciona em todo lugar. Depois volte aqui para conectá-lo ao seu HTML.

A Configuração Mais Simples de Favicon

Antes de mergulhar em variações de tags e casos especiais, aqui está a abordagem que funciona para a esmagadora maioria dos sites. Ela requer um arquivo e uma linha de HTML.

Coloque favicon.ico na raiz do seu domínio. Faça upload ou implante seu arquivo favicon.ico para que fique acessível em https://seudominio.com/favicon.ico. Este é o caminho que os navegadores verificam por padrão desde o final dos anos 1990. Mesmo sem nenhuma tag HTML apontando para ele, a maioria dos navegadores encontrará e exibirá um favicon nesta localização automaticamente. Essa convenção está embutida no comportamento dos navegadores e não vai desaparecer.

Adicione uma tag link ao head do seu HTML. Embora a convenção do caminho raiz funcione sozinha, adicionar uma tag explícita remove toda ambiguidade e garante comportamento consistente entre navegadores, subdomínios e aplicações single-page onde a raiz do documento pode não mapear diretamente para a raiz do servidor.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Título da Sua Página</title>
  <link rel="icon" href="/pt/favicon.ico" sizes="any">
</head>
<body>
  <!-- seu conteúdo -->
</body>
</html>

Essa única tag <link> é suficiente para todos os principais navegadores: Chrome, Firefox, Safari, Edge e até versões legadas do Internet Explorer. O atributo sizes="any" informa ao navegador que o arquivo ICO contém múltiplas resoluções e ele deve selecionar a mais apropriada para o contexto atual, seja um ícone de aba de 16x16 ou um ícone de favoritos de 32x32.

Esta é a configuração que recomendamos para a maioria dos sites. É simples, confiável e universalmente suportada. Você pode parar aqui e seu favicon funcionará corretamente em praticamente todos os cenários.

Cache e "Favicon Não Aparece"

Você implantou seu novo favicon, atualizou a página e o ícone antigo ainda está olhando para você na aba do navegador. Isso não é um bug no seu código. É quase certamente um problema de cache, e é de longe a razão mais comum pela qual desenvolvedores pensam que sua configuração de favicon está quebrada quando na verdade está funcionando perfeitamente.

Os navegadores armazenam favicons em cache de forma agressiva. Diferente de recursos regulares da página, favicons são frequentemente armazenados em cache separadamente e por períodos muito mais longos. O Chrome, por exemplo, armazena favicons em um banco de dados dedicado que nem sempre responde a uma atualização normal de página. Firefox e Safari têm comportamento similar. Isso significa que mesmo depois de substituir o arquivo no servidor, o navegador pode continuar exibindo o ícone antigo por horas ou até dias.

Atualização forçada: Pressione Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (macOS) para ignorar o cache e recarregar todos os recursos do servidor. Isso funciona para a maioria dos recursos da página, mas nem sempre limpa especificamente o cache de favicon.

Janela anônima: Abra seu site em uma janela privada ou anônima. Isso começa com cache completamente vazio e carregará o favicon diretamente do servidor. Se você vê o favicon correto no modo anônimo, sua configuração está correta e a sessão de navegação normal simplesmente precisa de tempo para captar a mudança.

Limpar cache do navegador manualmente: Se o modo anônimo confirma o novo favicon mas sua sessão regular ainda mostra o antigo, limpe as imagens e arquivos em cache do navegador. No Chrome, vá em Configurações, Privacidade e segurança, Limpar dados de navegação e selecione Imagens e arquivos armazenados em cache. Após limpar, recarregue seu site.

Adicionar uma query string para forçar atualização: Como medida temporária durante o desenvolvimento, você pode adicionar uma query string para forçar o navegador a tratar o favicon como um novo recurso: <link rel="icon" href="/pt/favicon.ico?v=2" sizes="any">. Incremente o número da versão cada vez que atualizar o favicon. Remova a query string quando estiver satisfeito com o ícone, ou mantenha-a como estratégia permanente de versionamento.

Tamanhos e Escolha de Arquivo: ICO vs PNG

Você deve usar um arquivo ICO, um arquivo PNG ou ambos? A resposta depende de quanta complexidade você quer na sua configuração e quais navegadores precisa suportar.

ICO é a escolha universal. O formato ICO tem sido o formato padrão de favicon desde que o Internet Explorer 5 introduziu favicons em 1999. Todo navegador que suporta favicons suporta ICO. Um único arquivo ICO pode conter múltiplos tamanhos (16x16, 32x32, 48x48 e mais), então o navegador sempre tem a resolução certa disponível sem você precisar manter arquivos separados para cada tamanho. Para simplicidade e máxima compatibilidade, ICO é a aposta mais segura.

PNG é uma alternativa moderna. Todas as versões atuais de Chrome, Firefox, Safari e Edge suportam favicons PNG através da tag <link rel="icon" type="image/png">. Favicons PNG são ligeiramente mais simples de criar (um único arquivo PNG em um tamanho), mas você precisa de um arquivo e tag separados para cada tamanho que quiser fornecer. Isso pode significar duas ou três tags link adicionais no head do seu HTML.

SVG é a opção mais nova. Favicons SVG são suportados em Chrome, Firefox e Edge, mas não no Safari até o início de 2025. Um favicon SVG escala perfeitamente para qualquer tamanho, o que é atraente para telas de alta resolução. No entanto, a falta de suporte no Safari significa que você ainda precisa de um fallback ICO ou PNG.

Para a maioria dos sites, recomendamos a abordagem pragmática: use um arquivo ICO multi-tamanho como seu favicon principal e opcionalmente adicione um ícone PNG ou SVG como melhoria. Isso dá compatibilidade universal através do arquivo ICO e otimização moderna através dos formatos adicionais. Para uma análise detalhada de quais tamanhos incluir e por quê, veja nosso guia tamanhos de favicon explicados.