Comparação de formatos de favicon: ICO vs PNG vs SVG
Três formatos, três funções. Use .ico para o caminho /favicon.ico e clientes antigos, PNG para navegadores modernos e todos os tamanhos de ícone de app, e SVG para um ícone de aba nítido e adaptável ao tema.
Cada formato tem uma função diferente
Não existe um único formato de favicon ideal. Cada um cobre um caso que os outros não conseguem. Escolher um só e forçá-lo em todo lugar é o caminho para abas em branco e telas iniciais com um quadrado cinza.
O formato .ico é um contêiner que guarda vários tamanhos em um só arquivo. Isso importa porque navegadores e rastreadores ainda requisitam /favicon.ico por padrão, e clientes antigos só entendem .ico. Um .ico de verdade não é um PNG com a extensão renomeada. Renomear um arquivo muda o nome dele, não os bytes, e a maioria dos clientes vai rejeitá-lo.
O PNG é o cavalo de batalha. Todo navegador moderno lê, e todo espaço de ícone de app e de manifesto (16, 32, 180, 192, 512) é um PNG. O SVG é o recém-chegado: um único arquivo vetorial que permanece nítido em qualquer tamanho e pode trocar de cor no modo escuro com uma media query dentro do próprio arquivo.
ICO vs PNG vs SVG
| Formato | Melhor para | Fique de olho |
|---|---|---|
| .ico | O caminho /favicon.ico e navegadores ou rastreadores antigos que só leem .ico | Precisa ser um contêiner real com múltiplos tamanhos (16 + 32 + 48), não um PNG renomeado. Não use para ícones de app. |
| PNG | Abas de navegadores modernos e todos os tamanhos de ícone de app e de manifesto (16, 32, 180, 192, 512) | É raster, então cada tamanho é um arquivo separado. Você ainda precisa de todos os tamanhos, um único PNG não cobre todos. |
| SVG | Um único ícone de aba nítido que escala para qualquer tamanho e pode inverter a cor no modo escuro | Não é válido em /favicon.ico e não é usado nas telas iniciais de iOS ou Android. Mantenha-o simples, efeitos podem renderizar de forma diferente entre navegadores. |
Como eles convivem no head
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Um navegador que lê SVG usa o favicon.svg. Todo o resto recorre aos PNGs e ao .ico. O apple-touch-icon permanece PNG porque o iOS ignora SVG aqui.
Dúvidas comuns
Posso simplesmente renomear um PNG para favicon.ico?
Não. O .ico é um formato de contêiner próprio, não um PNG com outra extensão. Alguns navegadores toleram um arquivo com rótulo errado, mas muitos não, e os rastreadores são mais rígidos. Gere um .ico real com múltiplos tamanhos.
Ainda preciso do favicon.ico se tenho PNG e SVG?
Sim, mantenha um. Navegadores, leitores de feed e rastreadores de busca ainda requisitam /favicon.ico sem tag alguma. Um arquivo nesse caminho é a rede de segurança quando suas tags link passam despercebidas.
Um favicon em SVG é melhor que PNG?
Para o ícone de aba pode ser, porque um único arquivo permanece nítido em todos os tamanhos e pode se adaptar ao modo escuro. Ele não substitui os ícones de app em PNG das telas iniciais, então use os dois.
Qual formato uso para o ícone de manifesto 512x512?
PNG. O array de icons do manifesto espera PNGs raster em 192 e 512, incluindo um maskable. O SVG não é o formato que o Android usa para ícones de apps instalados.