Tamanhos de favicon em 2026: os que você precisa (e os que pode pular)
As listas de tamanhos de favicon têm vinte arquivos. Quatro cobrem praticamente tudo. O que gerar, o HTML para colar e como projetar um legível a 16 px.
Atualizado em 11 de agosto de 20265 min de leitura
Procure tamanhos de favicon e você recebe listas de vinte arquivos, metade para plataformas que já não existem. O conjunto que realmente sustenta o peso em 2026 são quatro itens: um ICO por compatibilidade legada, um SVG se você tiver arte vetorial, um PNG de 180 × 180 para a tela de início do iOS e PNGs de 192 e 512 para Android e aplicativos web progressivos. Todo o resto dessas listas ou está coberto por um dos quatro, ou serve a uma plataforma com participação insignificante.
Os arquivos que importam
| Arquivo | Tamanho | Para que serve | Ainda é necessário? |
|---|---|---|---|
favicon.ico | 16, 32 e 48 num só arquivo | Abas do navegador, favoritos, alternativa legada | Sim |
icon.svg | Vetorial | Navegadores modernos; aceita modo escuro | Se você tiver arte vetorial |
apple-touch-icon.png | 180 × 180 | Tela de início do iOS | Sim — um tamanho cobre todos os aparelhos |
icon-192.png | 192 × 192 | Tela de início do Android | Sim |
icon-512.png | 512 × 512 | Diálogo de instalação e tela inicial de PWA | Sim, se você publicar um manifesto |
| Blocos do Windows | 70–310 | Blocos do Iniciar do Windows 8/10 | Raramente — legado |
Vale entender o formato ICO porque ele é incomum: um único arquivo .ico pode conter vários tamanhos e o navegador escolhe o que precisa. Por isso um arquivo cobre 16, 32 e 48 em vez de exigir três.
A Apple simplificou bastante o lado dela: 180 × 180 é agora o único tamanho de ícone de toque necessário, e tanto aparelhos antigos quanto novos escalam esse arquivo. As longas listas de ícones Apple de 57, 72, 114 e 144 pixels estão desatualizadas há anos.
Projete para 16 pixels, não para o seu logotipo
É aqui que quase todo favicon falha. Uma marca escrita completa reduzida a 16 × 16 é um borrão ilegível: nesse tamanho você tem aproximadamente o detalhe de uma única letra. O trabalho do favicon é ser reconhecível numa fileira de vinte abas, não reproduzir a marca.
- Use uma letra ou um símbolo, não o logotipo inteiro. A inicial, a parte icônica de uma marca combinada ou uma única forma distintiva.
- Elimine o detalhe fino. Traços finos, gradientes e contornos somem ou viram borrão. Formas sólidas sobrevivem.
- Use muito contraste sobre claro e sobre escuro. Barras de abas existem nos dois modos, e uma marca escura numa barra escura desaparece.
- Preencha o quadrado. Margens transparentes grandes deixam a marca menor do que precisava. Deixe só um pouco de respiro.
- Teste em tamanho real. Não ampliado no seu editor: a 16 pixels, numa aba de verdade, ao lado de outras abas.
Gerar os arquivos
Parta de um original quadrado e transparente
Idealmente 512 × 512 ou maior. Se seu logotipo está sobre uma caixa branca, recorte com o removedor de fundo; se não for quadrado, recorte com o recortador em vez de deixar o gerador acrescentar faixas.
Gere o conjunto
O gerador de favicon produz favicon.ico (16, 32 e 48 num só arquivo), favicons PNG de 16, 32, 48 e 96, o ícone de toque da Apple de 180 × 180, os PNGs de 192 e 512 para Android e aplicativos web instaláveis, um site.webmanifest e um trecho de HTML para colar — tudo num único zip. Com o Pro entram também os ícones de densidade Android, os blocos do Windows e uma cópia SVG se o original for vetorial.
Preencha os dados do manifesto
O ícone de 512 × 512 e o site.webmanifest já vêm no pacote — os ícones de PWA ficam ativados por padrão. Antes de gerar, informe no gerador o nome do aplicativo, o nome curto e a cor do tema para que o manifesto os traga; ele já aponta sozinho para os ícones de 192 e 512.
Coloque os arquivos na raiz e adicione as tags
A posição na raiz importa: os navegadores pedem /favicon.ico diretamente, você declarando ou não.
Adicione um logotipo e receba o pacote completo de favicon num único zip. Gerado no seu dispositivo: o logotipo nunca vai a um servidor.
Gerar um faviconO HTML de que você precisa
Quatro linhas no <head> cobrem todos os navegadores e plataformas atuais. Mais que isso costuma ser resíduo legado copiado de um tutorial antigo:
<link rel="icon" href="/favicon.ico" sizes="32x32">— a base de compatibilidade.<link rel="icon" href="/icon.svg" type="image/svg+xml">— navegadores modernos preferem quando presente.<link rel="apple-touch-icon" href="/apple-touch-icon.png">— tela de início do iOS.<link rel="manifest" href="/site.webmanifest">— aponta para os ícones de 192 e 512 para Android e instalação PWA.
Um favicon SVG tem uma vantagem real além da escala: ele pode responder ao esquema de cor do navegador com uma consulta prefers-color-scheme dentro do próprio SVG, de modo que uma marca escura vire clara numa barra de abas escura. Mantenha o ICO ao lado dele: favicons SVG funcionam no Chrome, Firefox, Edge e, desde o Safari 26, também no Safari, mas navegadores mais antigos e outras ferramentas ainda precisam do ICO como alternativa.
Por que seu novo favicon não aparece
Favicons são armazenados em cache de forma incomumente agressiva — muitas vezes além de uma recarga forçada normal e às vezes independentemente do cache da página. Antes de concluir que seu arquivo está errado, abra-o direto em https://seusite.com/favicon.ico para confirmar que está sendo servido, e depois teste numa janela anônima, que costuma começar com o cache de ícones limpo.
Se estiver mesmo travado, acrescentar uma query string à tag (/favicon.ico?v=2) força um novo download. E aproveite para conferir o tamanho do arquivo: favicons são pedidos praticamente a cada carregamento de página, então um ícone de 200 KB merece passar pelo compressor de PNG. Um conjunto de favicon bem feito pesa alguns kilobytes no total.
Perguntas frequentes
De quais tamanhos de favicon eu realmente preciso em 2026?
Quatro coisas cobrem: um `favicon.ico` com versões de 16, 32 e 48 pixels, um SVG se você tiver arte vetorial, um ícone de toque da Apple de 180 × 180 e PNGs de 192 e 512 pixels referenciados por um manifesto web. As listas mais longas que você encontra são em grande parte tamanhos legados de Apple e Windows.
Posso usar um PNG em vez de favicon.ico?
Navegadores modernos aceitam favicons em PNG e SVG, mas continuam pedindo `/favicon.ico` na raiz por padrão, e algumas ferramentas e leitores de feed esperam por ele. Publique o ICO como alternativa e deixe os navegadores modernos preferirem o SVG ou PNG que você declarar.
Por que meu favicon está borrado?
Normalmente porque foi gerado a partir de um original menor que o maior tamanho de saída, então foi ampliado. Parta de pelo menos 512 × 512. Também pode ter detalhe demais: traços finos e gradientes viram borrão a 16 pixels por melhor que seja a origem.
Como faço um favicon a partir do meu logotipo?
Recorte o logotipo num quadrado, remova o fundo para que ele tenha transparência real, simplifique para um único símbolo ou letra e passe por um gerador para produzir o ICO e o conjunto de PNGs. Teste o resultado a 16 pixels numa aba real antes de publicar.