Favicon ICO vs PNG: Qual Formato Você Deve Usar?
Use PNG como seu favicon principal e mantenha um favicon.ico na raiz do site como fallback. O PNG oferece cor de 24 bits completa e um canal alfa real, comprime melhor e todo navegador atual o aceita a partir de uma tag de link; a vantagem que resta ao ICO é empacotar vários tamanhos em um único arquivo e ser o que os clientes solicitam de /favicon.ico quando não há tag presente. Entregar ambos custa um arquivo extra e elimina o trade-off por completo.
Os dois formatos
O ICO é o container de ícones do Windows, e virou o formato de favicon por acidente: o Internet Explorer solicitava /favicon.ico e todo mundo passou a entregar um. Sua propriedade definidora é que um único arquivo .ico contém vários bitmaps em tamanhos diferentes, e o consumidor escolhe um.
O PNG é um formato de imagem web comum, com compressão sem perdas e um canal alfa completo. Ele contém exatamente uma imagem em um tamanho, então cobrir vários tamanhos significa vários arquivos e várias tags de link, que é justamente o que os navegadores modernos esperam.
Qual escolher
ICO
Fallback e requisições por caminho direto
- Um único arquivo carrega bitmaps de 16, 32 e 48 pixels juntos
- Solicitado de /favicon.ico por navegadores, crawlers e leitores de feed sem nenhuma tag de link envolvida
- Compreendido por todo navegador já lançado, incluindo os muito antigos
- Formato nativo dos atalhos de área de trabalho do Windows
- Desajeitado de criar e inspecionar; a maioria das ferramentas o trata como um artefato de build
PNG
Start hereO seu favicon principal
- Cor de 24 bits, então gradientes e marcas fotográficas sobrevivem
- Canal alfa completo, então as bordas fazem anti-aliasing de forma limpa contra qualquer cor de aba
- Menor do que o ICO equivalente com a mesma qualidade
- Suportado por todo navegador atual via link rel="icon"
- O formato que os manifests do Android e de PWA esperam para os ícones de instalação
Comparação técnica
| Propriedade | ICO | PNG |
|---|---|---|
| Profundidade de cor | Paleta de 8 bits em arquivos clássicos; 32 bits nos modernos | Cor de 24 bits mais alfa de 8 bits |
| Transparência | Máscara de 1 bit em arquivos clássicos; canal alfa nas entradas de 32 bits | Canal alfa completo |
| Tamanhos por arquivo | Vários, geralmente 16, 32 e 48 | Um |
| Compressão | Bitmaps sem compressão, ou entradas comprimidas em PNG | DEFLATE sem perdas |
| Solicitado sem uma tag de link | Sim, em /favicon.ico | Não |
O que colocar no head
<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">Declarar ambos não é um conflito. Um navegador lê todas as tags de link de ícone, faz a correspondência por tipo e tamanho, e usa o ICO apenas se preferir ou se os PNGs falharem.
Perguntas frequentes sobre ICO vs PNG
Posso abandonar o favicon.ico por completo?
Você pode, e os navegadores modernos vão funcionar bem desde que suas tags de link PNG estejam presentes. O que quebra é tudo que solicita /favicon.ico por caminho sem analisar o seu HTML (crawlers, leitores de feed, bots de prévia de link, algumas ferramentas de analytics), que vai registrar um 404 e não mostrar nada.
Qual formato vence se eu declarar ambos?
O navegador decide, usando os atributos type e sizes de cada link. Na prática, os navegadores atuais pegam o PNG que melhor corresponde ao tamanho que precisam, e recorrem ao ICO se nada mais corresponder.
O ICO tem qualidade pior que o PNG?
Não intrinsecamente. Uma entrada ICO de 32 bits carrega a mesma cor e alfa que um PNG, e muitos arquivos ICO literalmente embutem dados PNG. As reclamações de qualidade vêm de ICOs antigos de paleta de 8 bits com transparência de 1 bit, que produzem bordas duras e serrilhadas.