◑ PhotoCut Studio

Favicons em 2026: os tamanhos que você precisa e o HTML para copiar

Atualizado: julho de 2026 · Leitura: 4 minutos

Durante anos os geradores de favicons produziam vinte arquivos "por via das dúvidas": tamanhos para o Internet Explorer no Windows Vista, blocos do Windows 8, pinned tabs do Safari… A realidade de 2026 é muito mais simples: com 5 arquivos e 5 linhas de HTML você cobre todos os navegadores e dispositivos atuais.

Prévia de um favicon a 16, 32 e 48 px no Icon Studio do PhotoCut Studio. — A prévia pixel-perfect a 16/32/48 px mostra como o favicon vai aparecer na aba do navegador.

Vale o esforço: um favicon bem-feito é a primeira coisa que um usuário vê quando tem dez abas abertas, e costuma ser a primeira coisa que uma auditoria de SEO técnico ou um checklist de PWA revisa. Faltando ou quebrado, tira profissionalismo mesmo que o resto do site esteja impecável.

Os arquivos indispensáveis

Arquivo	Tamanho	Quem usa
`favicon.ico`	48 × 48	Navegadores antigos, leitores RSS, favoritos. Mesmo parecendo jurássico, continua sendo o fallback universal: muitos clientes o pedem direto em `/favicon.ico`.
`favicon-32.png`	32 × 32	A aba do navegador em telas normais e retina.
`apple-touch-icon-180.png`	180 × 180	iPhone e iPad ao adicionar o site à tela inicial. Sem transparência: o iOS põe fundo preto no transparente.
`icon-192.png` + `icon-512.png`	192 / 512	O manifest do PWA: ícone do app instalado e tela de splash no Android/desktop.
`maskable-512.png`	512 × 512	Variante "maskable" do manifest: o Android a recorta em círculo ou outras formas, então a arte deve caber nos 80% centrais.

O HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#111317">

E o site.webmanifest mínimo que referencia os ícones de PWA:

{
  "name": "Meu App",
  "short_name": "Meu App",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "display": "standalone"
}

Nós testamos: como o favicon aparece a 16 px

A prévia a 16 e 32 px —o tamanho real de um favicon na aba— é o teste honesto: o que fica bom a 512 px pode virar uma mancha a 16. Com margem e um sujeito claro, o favicon se manteve legível.

O Icon Studio gera o conjunto de favicons e você pode acompanhá-lo com o HTML pronto para colar no <head>. Tudo no navegador.

Teste feito pela equipe do PhotoCut Studio na versão web no Chrome. A captura acima é dessa sessão.

Erros comuns

Usar o logo completo a 16 px. Na aba cabem poucos traços: use o símbolo, não o logotipo com texto.
Esquecer o maskable. Sem ele, o Android coloca seu ícone quadrado dentro de um círculo branco — o clássico "ícone dentro de um ovo frito".
Transparência no apple-touch-icon. O iOS a substitui por preto. Coloque sempre um fundo colorido.
Um só SVG para tudo. O favicon SVG é ideal como complemento moderno, mas os ícones do manifest e o apple-touch-icon ainda exigem PNG.

E o favicon SVG?

Há alguns anos os navegadores baseados em Chromium e o Firefox aceitam um favicon vetorial:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

É a opção ideal se seu ícone é simples e geométrico: um único arquivo fica nítido em qualquer tamanho e pesa uma fração de um PNG. Mas não substitui o set completo: coloque-o como uma linha extra antes do favicon.ico, não no lugar dele, porque o Safari e os ícones do manifest ainda precisam de PNG.

Como conferir se ficaram bons

Abra o site numa aba nova e olhe o favicon em tamanho real (não confie na prévia do editor).
Teste em mais de um navegador: Chrome, Firefox e Safari interpretam a ordem de link rel="icon" com nuances diferentes.
No celular, adicione o site à tela inicial para ver o apple-touch-icon (iOS) e o ícone do manifest (Android) como um usuário real verá.
Se não vê a mudança, limpe o cache: os navegadores cacheiam favicons de forma bem agressiva, às vezes por dias.

Perguntas frequentes

O favicon.ico ainda é necessário em 2026?

Sim. Embora os navegadores modernos prefiram o PNG declarado no link rel="icon", muitos clientes (leitores RSS, crawlers, favoritos) ainda pedem /favicon.ico diretamente. É o fallback universal e vale incluí-lo.

O que acontece se eu não colocar um favicon?

O navegador mostra um ícone genérico (uma folha em branco ou o ícone padrão) e, se o site for instalado como PWA, usa um quadrado com a inicial do domínio. Não quebra nada, mas parece pouco profissional e não identifica sua marca nas abas nem nos favoritos.

Gerar meus favicons →