Escolher as dimensões corretas do favicon é essencial para um ícone nítido e profissional em todos os dispositivos. Este completo guia de tamanhos de favicon abrange todas as dimensões que você precisa em 2026 — desde o clássico ícone de aba de navegador 16×16 até o ícone PWA maskable 512×512 — além dos formatos e práticas recomendadas que mantêm sua marca nítida em todas as plataformas.
Por que o tamanho do favicon importa
Os favicons são exibidos em vários tamanhos em navegadores, sistemas operacionais e telas iniciais. Um único arquivo de origem não consegue atender a todos os contextos, porque cada plataforma solicita uma dimensão específica. Se você fornecer apenas um tamanho, os navegadores irão ampliá-lo ou reduzi-lo — muitas vezes produzindo resultados desfocados ou cortados que enfraquecem sua marca.
Fornecer as dimensões corretas do favicon para cada plataforma garante que a imagem seja renderizada na resolução nativa, o que significa bordas nítidas, cores precisas e transparência confiável. Este guia lista todos os tamanhos que vale a pena gerar e explica onde cada um é usado, para que você possa entregar um pacote completo com confiança.
Referência completa de tamanhos de favicon
A tabela abaixo lista os tamanhos de favicon que os sites modernos devem incluir em 2026, o formato que cada um usa e a plataforma que o consome. Use-a como sua referência única ao preparar um pacote.
| Tamanho | Formato | Usado para |
|---|---|---|
| 16×16 | ICO / PNG | Aba clássica do navegador, suporte legado |
| 32×32 | ICO / PNG | Aba padrão do navegador em telas retina |
| 48×48 | ICO | Barra de tarefas do Windows, algumas visualizações de favoritos |
| 64×64 | PNG | Barra de endereços do navegador em telas de alto DPI |
| 96×96 | PNG | Favoritos e atalhos da área de trabalho |
| 120×120 | PNG | Telas iniciais Android mais antigas |
| 152×152 | PNG | Ícone de toque do iPad (legado) |
| 167×167 | PNG | Ícone de toque do iPad Pro |
| 180×180 | PNG | apple-touch-icon do iPhone (atual) |
| 192×192 | PNG | Tela inicial do Android Chrome, PWA |
| 512×512 | PNG | Tela de abertura do PWA, ícone maskable |
Os tamanhos essenciais a gerar
Embora a lista completa acima seja abrangente, um conjunto enxuto cobre a grande maioria dos usuários. Nosso gerador de favicons produz este pacote essencial a partir de um único upload:
- 16×16 e 32×32—os tamanhos essenciais para abas de navegador em desktop em telas padrão e retina.
- 48×48—incluído dentro do arquivo ICO para exibição na barra de tarefas do Windows e favoritos legados.
- 180×180—o apple-touch-icon exigido pelo iOS para atalhos na tela inicial.
- 192×192 e 512×512—os tamanhos Android e PWA declarados no seu manifesto web.
Juntamente com uma versão SVG para navegadores modernos, este conjunto cobre praticamente todos os dispositivos que um visitante pode usar em 2026. Você não precisa acompanhar cada tamanho legado manualmente — o gerador os agrupa para você.
Formatos de favicon comparados
O tamanho é apenas metade da equação; o formato determina a compatibilidade e o peso do arquivo. A comparação abaixo resume os três formatos que você deve incluir juntos:
| Formato | Resolução | Tamanho do arquivo | Melhor Para |
|---|---|---|---|
| ICO | Fixo (contêiner mult tamanho) | Pequeno a médio | Navegadores legados, fallback /favicon.ico |
| PNG | Fixo (um tamanho por arquivo) | Pequeno | Navegadores modernos, apple-touch-icon, Android |
| SVG | Vetorial (independente de resolução) | Minúsculo | Safari, Chrome, ícones compatíveis com modo escuro |
O SVG é particularmente valioso em 2026 porque escala perfeitamente para qualquer densidade de pixels e pode incluir media queries que se adaptam automaticamente ao modo escuro. Nosso gerador produz um SVG automaticamente quando você envia uma fonte vetorial, tornando-o o formato mais à prova de futuro do seu pacote.
Requisitos de tamanho específicos por plataforma
Navegadores de desktop
Navegadores de desktop como Chrome, Firefox, Safari e Edge solicitam favicons em 16×16 e 32×32 pixels. Em telas retina, a variante de 32×32 é usada para a aba. O formato ICO pode agrupar ambos os tamanhos em um único arquivo, e é por isso que disponibilizar /favicon.ico continua sendo uma boa prática até hoje — ele serve como fallback automático.
Apple iOS e iPadOS
Dispositivos Apple ignoram o link padrão de favicon ao adicionar um site à tela inicial. Em vez disso, eles procuram um PNG de 180×180 declarado com rel=”apple-touch-icon”. Sem esse arquivo, o iOS usará uma captura de tela da página ou um ícone genérico, o que parece pouco profissional e quebra a consistência da marca na plataforma móvel mais popular.
Android e Progressive Web Apps
O Chrome para Android e os instaladores de PWA leem ícones de um manifesto de aplicativo web. Os dois tamanhos obrigatórios são 192×192 e 512×512. A variante de 512×512 também é usada para a tela de abertura da PWA. Para ícones maskable — aqueles que se adaptam a diferentes formatos de ícone do Android — você deve marcar o PNG de 512×512 como “purpose”:”maskable” no manifesto.
Boas práticas para dimensionamento de favicon
Siga estas boas práticas para manter seu favicon nítido em todos os tamanhos e plataformas:
- Comece grande. Gere a partir de uma fonte de 512×512 ou maior para que cada redução permaneça nítida.
- Inclua todos os tamanhos. Forneça 16, 32, 48, 180, 192 e 512, além de SVG, para cobertura completa.
- Mantenha /favicon.ico na raiz. Os navegadores usam esta URL por padrão quando nenhuma tag link está presente.
- Teste em 16×16. Se o seu design se mantém no menor tamanho, ele ficará bom em qualquer lugar.
- Use vetor quando possível. O SVG se adapta a qualquer resolução e oferece suporte ao modo escuro.
Como gerar todos os tamanhos de uma só vez
Produzir todos esses tamanhos manualmente seria tedioso. Nosso gerador de favicons faz o trabalho para você em quatro passos simples:
- Envie uma imagem quadrada de origem com 512×512 ou maior.
- Revise as pré-visualizações ao vivo em 16×16, 32×32 e 180×180.
- Clique em criar para baixar um ZIP contendo todos os tamanhos e formatos acima.
- Copie as tags de link HTML e o manifesto incluídos para o seu site.
Todo o processo leva menos de um minuto e produz um pacote que atende a todas as plataformas abordadas neste guia. Você nunca precisa lembrar qual tamanho vai onde — o gerador nomeia cada arquivo corretamente e fornece tags de link correspondentes.
Perguntas frequentes
Qual é o tamanho padrão de favicon para um site?
O tamanho padrão de favicon mais comum é 32×32 pixels para a aba do navegador, com um fallback de 16×16 dentro de um arquivo ICO. Sites modernos também devem incluir 180×180 para iOS e 192×192 mais 512×512 para uso em Android e PWA.
Qual deve ser o tamanho da minha imagem de origem?
Use uma imagem quadrada de origem de pelo menos 512×512 pixels. Uma fonte maior permite que o gerador reduza com nitidez para todos os tamanhos necessários, mantendo seu favicon nítido em telas retina e telas móveis de alta densidade.
Qual é o tamanho do apple-touch-icon?
O tamanho atual do apple-touch-icon é 180×180 pixels. O iOS usa este PNG para atalhos na tela inicial e ignora o link padrão de favicon, então ele deve ser declarado com rel=”apple-touch-icon” no seu HTML.
Quais tamanhos o Android exige para favicons?
O Chrome para Android e os progressive web apps exigem ícones PNG de 192×192 e 512×512 declarados em um manifesto de aplicativo web. O ícone de 512×512 deve ser marcado como maskable para que o Android possa adaptá-lo a diferentes formatos de tela inicial.
Devo usar SVG ou PNG para meu favicon?
Use ambos. O SVG escala perfeitamente e oferece suporte ao modo escuro em navegadores modernos, enquanto o PNG garante compatibilidade com iOS, Android e navegadores mais antigos. Incluir os três formatos — ICO, PNG e SVG — garante que seu favicon pareça nítido em todos os lugares.
Como os tamanhos afetam o desempenho e o carregamento
Servir o tamanho correto de favicon não é apenas uma questão visual — também afeta a rapidez com que seu site carrega. Quando um navegador solicita um ícone de aba de 32×32 e você serve um PNG de 512×512, o visitante baixa muito mais bytes do que o necessário para um elemento minúsculo na tela. Ao longo de muitos carregamentos de página por muitos visitantes, essa largura de banda desperdiçada se acumula. Ao incluir cada tamanho como um arquivo separado e declará-los com o atributo sizes correto nas suas tags de link, você permite que o navegador escolha automaticamente o menor arquivo adequado. O resultado é uma primeira renderização mais rápida e um perfil de página mais enxuto, o que importa tanto para a experiência do usuário quanto para as Core Web Vitals em 2026. O gerador cuida dessa otimização para você, nomeando e dimensionando cada arquivo com precisão.
Gere todos os tamanhos de favicon agora
Você não precisa mais lembrar qual tamanho cada plataforma deseja. Envie uma imagem quadrada para o nosso gerador e baixe um pacote completo cobrindo todas as dimensões e formatos descritos neste guia, junto com HTML pronto para colar e um manifesto. É a maneira mais simples de atender a todos os navegadores e dispositivos em 2026. Seja para garantir nitidez em uma aba retina, um atalho limpo na tela inicial do iOS ou uma tela de abertura de PWA perfeita, um único download cobre tudo isso.
