Gerador de Favicon

O que é um favicon?

O favicon é aquele iconezinho que aparece na aba do navegador, nos favoritos e nos atalhos. Os tamanhos que mais aparecem são 16×16 (aba) e 32×32 (favoritos), além de 192×192 e 512×512, usados em PWA e no Android.

Aqui você gera todos esses tamanhos de uma vez, partindo de um texto ou de um emoji. Quando o ícone for mais elaborado, o caminho é fornecer uma imagem em SVG.

A geração é feita no seu navegador, via Canvas.

O que é um favicon e onde ele aparece

Favicon (de favorite icon) é o pequeno gráfico que representa um site dentro do navegador e do sistema operacional. Aparece na aba ao lado do título, nos favoritos, no histórico, em abas fixadas, no alternador de tarefas, em atalhos da tela inicial em celulares, no banner de instalação de PWAs e na folha de compartilhamento. Sempre que um site precisa ser identificado fora do conteúdo, é o favicon que faz o trabalho.

O formato foi introduzido pela Microsoft em março de 1999 com o Internet Explorer 5. A implementação original procurava um arquivo chamado favicon.ico na raiz do site. Os outros navegadores adotaram a convenção, e até hoje todo navegador requisita /favicon.ico implicitamente mesmo sem tag <link>. Mais de 25 anos depois, aquele arquivo virou um ecossistema que cobre Retina, Android, modo escuro, PWAs e ícones adaptativos mascaráveis.

Um favicon ausente ou ruim faz o site parecer quebrado: o placeholder vazio rouba atenção, a lista de favoritos vira parede de globinhos genéricos, e o Android se recusa a criar um atalho nítido. Tratar o favicon como ativo de marca, e não como detalhe esquecido, é uma das vitórias mais baratas em polimento.

Tamanhos modernos que realmente importam

Tutoriais antigos listam dezenas de dimensões herdadas de uma época em que cada dispositivo tinha sua própria convenção. Em 2026 o baseline prático é muito menor:

• 16x16 — aba clássica em telas desktop de DPI padrão, ainda renderizada em abas muito fixadas.
• 32x32 — tamanho dominante de aba desktop hoje; é dele que Chrome, Edge, Firefox e Safari fazem downscale para a maioria das superfícies.
• 180x180 — Apple Touch Icon do iOS Safari. Um único PNG cobre todos os iPhones e iPads; as variantes legadas de 152, 167 e 120 não são mais necessárias.
• 192x192 — ícone da tela inicial do Android Chrome declarado no manifest. Sem ele, o Android cai no Apple Touch Icon ou em upscale borrado.
• 512x512 — splash screen do Android e tamanho canônico do ícone mascarável, onde o Android recorta círculo/squircle/gota a partir da arte.
• SVG (any) — vetor escalável renderizado perfeitamente em qualquer densidade. Chrome, Firefox, Edge e Safari Technology Preview aceitam via type="image/svg+xml".

Tamanhos que já foram comuns mas não valem mais os bytes incluem 48, 64, 96, 128, 144 (tile do Windows), 152, 167 e as variantes do Apple Touch Icon entre 57 e 144 pixels. Eram contornos para navegadores e aparelhos que foram aposentados ou aprenderam a fazer downscale direito.

Escolhendo o formato: ICO, PNG ou SVG

ICO — o contêiner legado multi-resolução

ICO é um contêiner nativo do Windows que guarda vários bitmaps de tamanhos diferentes em um único arquivo. Um favicon.ico bem montado embute 16x16, 32x32 e às vezes 48x48; o navegador escolhe a resolução mais próxima da superfície. ICO ainda é o formato mais compatível e o fallback universal na raiz do documento.

PNG — um arquivo por tamanho

PNG é o formato raster universal. Cada dimensão é um arquivo separado: mais requisições mas muito mais controle, porque você ajusta o 16x16 à mão em vez de confiar no downscale automático. PNG é obrigatório nas superfícies de 180, 192 e 512; iOS e Android não consomem um ICO nesses contextos.

SVG — escalável e com suporte a modo escuro

SVG é a opção mais moderna. Um vetor renderiza nítido em monitor 4K e em aba fixada de 16 pixels; o arquivo costuma ser menor que um PNG de 32x32; e o SVG carrega seu próprio CSS, trocando cores via prefers-color-scheme sem um segundo arquivo. Chrome, Firefox e Edge dão suporte; Safari ignora e cai no próximo ícone declarado.

O Web App Manifest

O manifest.webmanifest é o documento JSON que transforma um site num PWA instalável. Mesmo sem intenção de virar PWA, é no manifest que o Android Chrome procura o ícone da tela inicial. O mínimo útil declara name, short_name, um array icons com os PNGs de 192 e 512, um theme_color e um background_color usado como fundo da splash. Carregue com uma única tag <link rel="manifest">.

Cada entrada de icons pode carregar um campo purpose. Os valores any e maskable são os relevantes. Ícones mascaráveis precisam colocar a arte dentro de uma área segura de 409 pixels centrada no canvas de 512, porque o Android os recorta para o formato da plataforma (círculo, squircle ou gota). Sem um PNG mascarável, o Android adiciona padding branco em volta do ícone normal.

Markup HTML que funciona em todo lugar

Um bloco de favicon moderno tem três ou quatro linhas e mora dentro do <head>. A ordem importa: os navegadores percorrem a lista e usam o primeiro match utilizável. Declare o SVG primeiro para que navegadores modernos o prefiram; o ICO por último como fallback universal.

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#6366f1">

A meta theme-color não contribui com nenhum ícone, mas faz parte da mesma superfície de identidade: ela colore a barra de endereço no Android Chrome e a barra de título em PWAs instalados. Combine-a com a cor dominante do favicon para uma sensação consistente.

Favicons em modo escuro

Um favicon projetado para fundos brancos some contra as abas escuras do macOS, Windows 11 e da maioria dos navegadores em tema escuro. A primeira solução robusta é um SVG com regra interna @media (prefers-color-scheme: dark) que troca a cor de preenchimento; navegadores modernos respeitam isso na superfície do favicon.

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

A segunda opção é duas duplas ICO/PNG separadas, declaradas com media="(prefers-color-scheme: dark)" no <link>. Chrome e Firefox honram; o Safari ignora e cai na declaração sem condição.

Erros comuns

• ICO antigo de tamanho único. 16x16 fica borrado em abas Retina. Sempre embuta pelo menos 16 e 32 dentro do ICO.
• Esquecer o ícone 192x192 do manifest. O Android cai no Apple Touch Icon e faz upscale, com bordas suaves a cada instalação.
• Cache depois de redesenho. Renomeie o arquivo ou anexe ?v=2 ao trocar a arte.
• Desenhar para 512 e dar downscale para 16. Dimensões minúsculas precisam dos próprios contornos ajustados à mão; o que se lê em 512 vira borrão em 16.
• Content type errado. Servir favicon.ico como text/html renderiza ícone quebrado. Envie image/x-icon.
• Pular ícones mascaráveis. Sem purpose: "maskable", o Android corta o ícone da tela inicial de forma desajeitada.

FAQ

Ainda preciso de favicon.ico na raiz?

Sim. Os navegadores requisitam /favicon.ico implicitamente mesmo quando o HTML declara só PNG e SVG. Devolver um arquivo real evita um 404 no log de rede.

SVG sozinho é suficiente?

Para abas desktop, sim. Mas o iOS Safari não consome SVG no Apple Touch Icon e o Android espera PNGs no manifest. O mínimo seguro em 2026 é SVG mais 180x180 mais 192/512 mais o ICO de fallback.

Por que meu favicon novo não aparece?

Quase sempre cache. Force reload completo e adicione query string na URL se o arquivo tiver o mesmo nome da versão anterior.

O apple-touch-icon deve ter cantos arredondados?

Não. Forneça um PNG quadrado de 180x180; o iOS aplica a máscara arredondada automaticamente. Embutir os cantos no PNG gera arredondamento duplo e ícone menor que o esperado.