Guia de favicons 2026: quais tamanhos e arquivos você realmente precisa

Por que o favicon importa mais do que parece

O favicon é a menor imagem do seu site e, mesmo assim, uma das que cada usuário mais vê: na aba do navegador, nos favoritos, no histórico, na tela inicial do celular e, desde 2019, ao lado do seu site nos resultados de busca do Google no celular e no desktop.

Um favicon claro e reconhecível ajuda o usuário a encontrar sua aba entre outras quinze abertas e aumenta a confiança nos resultados de busca. Um favicon quebrado (o globo cinza padrão) transmite exatamente o contrário: site descuidado ou abandonado.

O conjunto mínimo moderno

A especificação mudou muito em dez anos. Hoje, este é o conjunto recomendado pelas equipes do Chrome e do Safari, e que cobre praticamente todos os casos:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">

E no manifest:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Só isso. Você não precisa de mstile-150x150.png, browserconfig.xml, 12 tamanhos de apple-touch-icon nem safari-pinned-tab.svg (o Safari usa o ícone normal desde a versão 12).

Cada arquivo, explicado

favicon.ico

O formato ICO é um contêiner que pode guardar várias imagens de tamanhos diferentes. Desde o Windows Vista, essas imagens podem ser PNG, o que reduz muito o peso. O recomendável é incluir 16, 32 e 48 px.

Embora os navegadores modernos prefiram SVG ou PNG, o ICO continua indispensável por um motivo prático: muitíssimos programas (leitores RSS, clientes de e-mail, ferramentas de SEO, o próprio Google em alguns casos) pedem diretamente https://seudominio.com/favicon.ico sem ler o seu HTML. Se ele não existir, aparece um erro 404 nos seus registros e um ícone genérico é exibido.

icon.svg

Um favicon vetorial fica perfeito em qualquer densidade de tela e costuma pesar menos de 1 KB. Além disso, permite algo que nenhum PNG consegue: adaptar-se ao modo escuro com uma media query dentro do próprio arquivo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="…"/>
</svg>

Chrome, Firefox e Edge o suportam; o Safari usa o ICO ou o PNG como fallback. Antes de publicá-lo, passe-o pelo otimizador de SVG para remover o código que os editores deixam.

apple-touch-icon.png (180 × 180)

É o ícone que o iOS usa quando alguém adiciona seu site à tela inicial, e também o que o Safari mostra em algumas listas de favoritos. Dois detalhes importantes:

Não suporta transparência. O iOS preenche as áreas transparentes com preto. Coloque sempre um fundo sólido.
O iOS arredonda os cantos automaticamente. Entregue-o quadrado; se você mesmo arredondar, verá uma borda dupla.

icon-192.png e icon-512.png

São os exigidos pelo manifest para que o Chrome considere seu site instalável como PWA. O de 192 é usado na tela inicial do Android e o de 512 na tela de abertura e nas lojas de aplicativos web.

icon-maskable-512.png

Cada fabricante de Android usa uma forma diferente para os ícones: círculo, squircle, quadrado arredondado, gota… Um ícone maskable é projetado para que o sistema o recorte com qualquer uma dessas formas sem cortar o logo. A regra é que tudo o que importa caiba dentro de um círculo com 80% do diâmetro do ícone, e que o fundo chegue até as bordas.

Se você não fornecer um ícone maskable, o Android coloca seu ícone normal sobre um círculo branco, o que costuma parecer pequeno e pouco profissional.

Como vinculá-los conforme a sua plataforma

HTML estático, Astro, Eleventy, Hugo: copie os arquivos para a pasta pública e cole as cinco linhas acima no <head> do seu template.

Next.js (App Router): coloque favicon.ico, icon.svg e apple-icon.png dentro de app/. O Next.js detecta esses nomes e gera as tags automaticamente, com um hash na URL para evitar problemas de cache. O manifest pode ser gerado com app/manifest.ts.

WordPress: Aparência → Personalizar → Identidade do site → Ícone do site. Envie um PNG de 512 px e o WordPress gera os tamanhos de 32, 180, 192 e 270 px. Ele não cria um ICO nem um ícone maskable; se quiser, adicione-os com um plugin de cabeçalhos ou no tema.

Shopify: Loja virtual → Temas → Personalizar → Configurações do tema → Favicon. A Shopify redimensiona para 32 px; para o resto você precisa editar o theme.liquid.

Como fazer o Google mostrar seu favicon

O Google mostra o favicon nos resultados se estas condições forem atendidas (segundo sua documentação para webmasters):

Ele está vinculado com <link rel="icon"> na página inicial do domínio.
Tanto a página inicial quanto o arquivo do favicon são rastreáveis: não estão bloqueados no robots.txt nem exigem login.
É quadrado e seu lado é múltiplo de 48 px (48, 96, 144…). Um SVG também é válido.
Representa visualmente sua marca e não é inapropriado.

A mudança pode levar de alguns dias a várias semanas. Você pode acelerar o processo solicitando a indexação da página inicial no Search Console.

Erros frequentes

O favicon não atualiza. Os navegadores o mantêm em cache por dias. Abra /favicon.ico diretamente e recarregue com Ctrl+F5, ou mude a URL acrescentando ?v=2.
Logo ilegível a 16 px. Um logotipo com texto não funciona nesse tamanho. Use o símbolo, a inicial ou uma versão simplificada.
Ícone invisível no modo escuro. Um logo preto sobre fundo transparente some na barra de abas escura. Use um SVG adaptável ou adicione um fundo.
PNGs enormes. Um icon-512.png exportado do Figma ou do Photoshop pode passar de 100 KB. Otimize-o sem perdas; normalmente cai para 15-40 KB.
Caminhos relativos. Use sempre caminhos absolutos a partir da raiz (/favicon.ico), ou os ícones vão falhar em páginas internas como /blog/artigo.

Gere tudo em um minuto

O gerador de favicons do ImageZap cria exatamente esse conjunto a partir do seu logo, com fundo, margem e cantos configuráveis, otimiza os arquivos com OxiPNG e entrega o código para HTML e Next.js. Tudo no seu navegador, sem enviar arquivos.