Como Adicionar um Favicon ao Seu Site (Passo a Passo)
Quatro passos, da aba em branco à identidade visual com pixels perfeitos. Funciona em qualquer site HTML, CMS ou framework.
O que você precisa antes
Um único favicon 16x16 já não basta. Navegadores modernos, iOS, Android e Windows solicitam, cada um, tamanhos e formatos diferentes. Antes de adicionar qualquer tag, garanta que você tem um conjunto completo de ícones.
O conjunto mínimo
| Arquivo | Tamanho | Quem precisa dele |
|---|---|---|
| favicon.ico | multirresolução | Navegadores e rastreadores que solicitam /favicon.ico por padrão |
| favicon-16x16.png | 16x16 | Abas do navegador e a barra de endereços |
| favicon-32x32.png | 32x32 | Abas retina, favoritos e atalhos na área de trabalho |
| apple-touch-icon.png | 180x180 | Telas iniciais do iOS |
| Ícone do manifest | 192x192 | Telas iniciais do Android, referenciado a partir do web manifest |
Como esses tamanhos realmente ficam
Os quatro passos
- 1
Gere os arquivos do seu favicon
Deixe um gerador produzir todos os tamanhos, o sprite .ico e um manifest.json ajustado em uma só passada. Solte um logotipo, uma captura de tela ou até um emoji e baixe o kit completo. Nunca criou ícones antes? Comece por como criar um favicon.
- 2
Adicione os arquivos à raiz do seu site
Copie os arquivos baixados para o diretório que serve a raiz do seu domínio. Em um site estático, é a pasta raiz; na maioria dos frameworks, é o diretório public/. O objetivo é que https://seusite.com/favicon.ico seja resolvido diretamente.
- 3
Adicione as tags de link ao seu <head>
Referencie cada ícone com tags <link> dentro do <head> do documento (icon, apple-touch-icon e manifest) em todas as páginas, o que normalmente significa um template ou layout compartilhado.
- 4
Verifique se funcionou
Faça o deploy, depois um hard-refresh e confira a aba. A verificação mais confiável é uma varredura automatizada que confirma que cada tag é resolvida e sinaliza qualquer ícone de plataforma que esteja faltando.
As tags de link
<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/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Cole isto dentro do elemento <head> de cada página. O link do manifest é o que te dá os avisos de instalação e os ícones na tela inicial. Veja o que é manifest.json.
Atalhos específicos por plataforma
Usa um framework ou CMS? Vários deles cuidam das tags do head por você, com suas próprias convenções. Os guias de plataforma cobrem Next.js, React, WordPress e Shopify.
Erros comuns
| Erro | Solução |
|---|---|
| Cache do navegador | Favicons antigos persistem. Faça um hard-refresh ou acrescente ?v=2 ao href do link. |
| Caminho errado | A barra inicial importa. /favicon.ico é servido a partir da raiz, não da pasta atual. |
| Falta o apple-touch-icon | As telas iniciais do iOS recorrem a uma captura de tela borrada sem ele. |
Perguntas frequentes
Onde eu coloco o arquivo do favicon?
Coloque o favicon.ico e os demais arquivos de ícone no diretório raiz do seu site (ou na pasta public/ na maioria dos frameworks) para que sejam servidos a partir da raiz do domínio, por exemplo https://example.com/favicon.ico.
Ainda preciso de um arquivo favicon.ico?
Sim. Navegadores e rastreadores ainda solicitam /favicon.ico por padrão, então entregar um .ico multirresolução ao lado de ícones modernos PNG e SVG te dá a maior compatibilidade possível.
Por que meu favicon não aparece depois que eu o adicionei?
Navegadores fazem cache de favicons de forma agressiva. Faça um hard-refresh, acrescente uma query string de versão como ?v=2 ao link e confirme que o caminho do arquivo está correto. Veja nosso guia de solução de problemas de favicon para cada causa.