Favicon (.ico) vs PNG

O formato .ico foi criado especificamente para armazenar vários tamanhos de ícones em um único contêiner binário. Um favicon.ico bem construído contém quadros de 16×16, 32×32, 48×48 e 64×64 pixels. Quando um navegador precisa de um favicon para uma guia, ele abre o arquivo .ico, lê o diretório ICO e seleciona o quadro que melhor corresponde ao tamanho de exibição necessário. Esse recurso de vários tamanhos é a vantagem definidora do .ico sobre o PNG.

PNG é um formato de imagem única. Um arquivo PNG contém exatamente uma imagem com exatamente uma resolução. Para cobrir vários tamanhos apenas com PNG, você precisa de vários arquivos e várias tags `<link>` com atributos `sizes=` explícitos. Isso é mais detalhado, mas permite um controle preciso sobre qual imagem é veiculada em cada resolução. PNG também suporta melhor compactação sem perdas do que quadros ICO codificados em BMP em qualquer resolução.

A compatibilidade do navegador é onde o .ico vence de forma decisiva. Cada navegador - incluindo o IE legado, o antigo Edge, versões antigas do Safari e navegadores de nicho obscuros - busca /favicon.ico na raiz do domínio sem a necessidade de qualquer tag `<link>`. Mesmo se você omitir totalmente a tag do link, os navegadores tentarão GET /favicon.ico como uma convenção. PNG requer tags `<link rel='icon' type='image/png'>` explícitas com tipos MIME corretos ou será ignorado.

O suporte à transparência é igual entre .ico e PNG. Ambos os formatos suportam um canal alfa de 8 bits (transparência total por pixel). No entanto, .ico só preserva a transparência quando seus quadros internos usam compactação PNG, não BMP. Os codificadores ICO antigos às vezes usam como padrão BMP, que tem transparência limitada (1 bit). Sempre use um gerador moderno que produza quadros .ico compactados em PNG.

A comparação do tamanho do arquivo depende do contexto. Um único PNG 32×32 é menor que um arquivo .ico de vários tamanhos que agrupa quadros de 16, 32, 48 e 64 px. No entanto, o .ico substitui quatro arquivos PNG separados mais quatro tags de link. Para a carga útil total, um .ico de vários tamanhos bem compactado é quase sempre menor do que o conjunto equivalente de PNGs individuais combinados.

PNG ganha em eficiência de compressão em qualquer tamanho individual. O algoritmo de compactação PNG (DEFLATE/zlib) é particularmente eficaz para logotipos de cores planas e arte em estilo de ícone com bordas nítidas e paletas de cores limitadas. Um logotipo PNG 32×32 com compactação ideal pode ter menos de 200 bytes. O quadro BMP equivalente dentro de um .ico tem sempre 4 KB, independentemente do conteúdo da imagem.

Para qualificação para favicon da Pesquisa Google, .ico e PNG são suportados. O rastreador do Google busca primeiro o favicon vinculado ao seu HTML ou volta para /favicon.ico. O requisito mínimo é 48×48 pixels e um URL acessível publicamente. Um PNG de tamanho adequado vinculado a `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` satisfaz isso tão bem quanto um pacote .ico do mesmo tamanho.

O comportamento do modo escuro difere entre os formatos. Os arquivos PNG não podem se adaptar ao esquema de cores do usuário - você precisaria do JavaScript para trocar a tag do link href dinamicamente, o que é frágil. O formato .ico não possui nenhum recurso de modo escuro. Para adaptação de favicon no modo escuro, apenas SVG oferece suporte nativo por meio de um bloco de estilo `@media (prefers-color-scheme: dark)` incorporado. PNG e .ico devem ser emparelhados com uma sobreposição SVG.

A configuração moderna ideal combina os dois formatos. Use `<link rel='icon' href='/favicon.ico'>` como substituto universal, `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` para clareza de Retina e `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` para suporte escalonável ao modo escuro. Navegadores que entendem os favicons SVG selecionam SVG; outros caem para PNG; navegadores antigos obtêm o .ico.

A integração do sistema operacional Windows é um domínio somente .ico. Atalhos da área de trabalho, ícones do File Explorer e pinos da barra de tarefas Windows leem o formato .ico. Se algum de seus usuários fixar seu site na barra de tarefas Windows ou criar um atalho na área de trabalho para seu URL, apenas /favicon.ico será usado como ícone de atalho. Os arquivos PNG são completamente ignorados neste contexto.

Para 180×180 apple-touch-icon, PNG é o único formato válido. iOS não lê .ico para ícones da tela inicial — ele requer especificamente um PNG vinculado via `<link rel='apple-touch-icon'>`. Este é um caso em que PNG não é apenas preferido, mas também obrigatório.

A configuração do servidor não deve ser esquecida. Muitos servidores web oferecem .ico com um tipo de conteúdo incorreto (`text/plain` em vez de `image/x-icon`) se não forem configurados explicitamente. Os arquivos PNG têm suporte mais amplo ao tipo MIME em plataformas de hospedagem. Se você perceber que seu favicon.ico não está carregando, verifique se seu servidor retorna `Content-Type: image/x-icon` ou `image/vnd.microsoft.icon` para solicitações ICO.

O favicon generator produz ambos os formatos simultaneamente. Você não precisa escolher – o pacote de download inclui favicon.ico, arquivos PNG independentes em 32×32 e 180×180 e SVG para a pilha moderna completa. Usar este pacote significa que a pergunta ICO vs PNG será respondida automaticamente: use ambos, cada um no contexto em que se destaca.

Para uma comparação completa de formatos que também abrange SVG, consulte best favicon format guide. Esse guia explica qual formato priorizar para cada caso de uso – site padrão, PWA, loja de comércio eletrônico e ferramenta de desenvolvedor – e fornece uma matriz de decisão para escolher sua pilha de favicons.