Formatos de arquivo
O que é ICO? Arquivos de ícone e favicons explicados
ICO é o formato de ícone do Windows que guarda vários tamanhos em um único arquivo. Explicamos sua estrutura, a história do favicon e quais tamanhos você precisa hoje.
Autor: Hemen Dönüştür Editör EkibiPublicado em: 8 min de leitura
ICO é o formato que o Windows usa para ícones de programas e pastas, e que a web usa para o pequeno ícone do site na aba do navegador (o favicon). O que o diferencia de outros formatos de imagem é que um único arquivo pode guardar vários tamanhos do mesmo ícone. Este artigo explica a estrutura interna de um arquivo ICO, como ele evoluiu nas versões do Windows, a história do favicon, quais tamanhos você precisa hoje e como gerar arquivos ICO do jeito certo.
O que é ICO?
ICO (extensão .ico) é um formato contêiner que a Microsoft definiu para recursos de ícone. Um arquivo ICO começa com um "diretório de ícones" que lista cada imagem do arquivo (por exemplo, 16x16, 32x32 e 48x48 pixels) como uma entrada separada. O Windows ou o navegador escolhe então o tamanho que melhor se encaixa onde o ícone é exibido.
O tipo MIME oficial registrado na IANA é image/vnd.microsoft.icon, mas os programas da Microsoft e muitos servidores ainda usam image/x-icon. O formato CUR, de cursores do mouse, é quase idêntico; ele usa 2 em vez de 1 no campo de tipo do diretório e guarda o ponto de clique do cursor (hotspot).
Histórico: dos ícones do Windows ao favicon
- Windows 1.0: os ícones eram monocromáticos.
- Windows 3.0: chegou a estrutura baseada em diretório, com várias imagens, que conhecemos hoje.
- 1995: o artigo "Icons", de John Hornick, da Microsoft, documentou em detalhes a estrutura ICO e recomendou aos desenvolvedores incluir pelo menos imagens de 16x16 (16 cores), 32x32 (16 cores) e 48x48 (256 cores).
- Março de 1999: o Internet Explorer 5 foi o primeiro navegador a suportar favicons. Um arquivo
favicon.icona raiz do site aparecia nos favoritos e na barra de endereços. - Windows XP: um canal alfa de 8 bits foi adicionado às imagens de 32 bits, permitindo bordas suaves e semitransparentes.
- Windows Vista: foram adicionadas imagens de 256x256 e compressão PNG dentro do ICO.
- 2003: o tipo MIME
image/vnd.microsoft.iconfoi submetido à IANA por um terceiro.
Estrutura de um arquivo ICO
Diretório de ícones (ICONDIR)
O arquivo começa com um cabeçalho de 6 bytes: um campo reservado (0), o tipo (1 para ícones, 2 para cursores) e o número de imagens. Em seguida vem uma entrada de diretório de 16 bytes para cada imagem.
Entrada de diretório (ICONDIRENTRY)
| Campo | Significado |
|---|---|
| bWidth, bHeight | Largura e altura (1 byte cada). O valor 0 significa 256 pixels. |
| bColorCount | Número de cores da paleta (0 para 8 bits ou mais) |
| wPlanes, wBitCount | Planos de cor e bits por pixel |
| dwBytesInRes | Tamanho dos dados da imagem em bytes |
| dwImageOffset | Onde os dados da imagem começam no arquivo |
Como os campos de tamanho têm um único byte, uma imagem dentro de um ICO pode ter no máximo 256x256 pixels.
Dados da imagem: BMP ou PNG
Em um ICO clássico, cada imagem é um BMP sem o cabeçalho de arquivo (um DIB). Segundo o artigo de Hornick, ela contém uma imagem colorida (a máscara XOR) seguida de uma máscara de transparência de 1 bit (a máscara AND); é por isso que a altura gravada no cabeçalho é a altura somada das duas máscaras, o dobro da altura real. A partir do Windows XP, as imagens de 32 bits levam o canal alfa diretamente nos dados de pixel.
Desde o Windows Vista, uma entrada também pode ser um arquivo PNG completo em vez de um BMP. Incorporar PNG, principalmente no tamanho 256x256, deixa o arquivo muito menor. A MDN lembra que PNG dentro de ICO não era suportado antes do Vista e pode causar problemas em programas antigos, mas os navegadores e as versões atuais do Windows leem os dois tipos.
Quais tamanhos você precisa?
Ícones de aplicativos Windows
A orientação atual da Microsoft para ícones de aplicativos diz que um app Win32 deve incluir pelo menos 16x16, 24x24, 32x32, 48x48 e 256x256. Se o Windows não encontra um tamanho exato, ele reduz o próximo tamanho maior; com uma imagem de 256 pixels presente, o ícone só é reduzido, nunca ampliado. Na escala de 100%, por exemplo, a barra de título e os menus de contexto usam 16 pixels e a barra de tarefas usa 24; em 200%, esses valores passam a 32 e 48.
Favicons para sites
Na web é diferente. Pelo HTML Standard, se uma página não tem um link rel="icon", os navegadores podem solicitar /favicon.ico na raiz do site. Por isso manter um favicon.ico na raiz ainda é uma boa prática, mas isso sozinho não basta:
- A Pesquisa Google exige um favicon quadrado (1:1) de pelo menos 8x8 pixels e recomenda um maior que 48x48 para que fique bom em diferentes superfícies.
- As telas de início do iPhone e do iPad usam um
apple-touch-iconde 180x180. - Android e PWAs esperam ícones de 192 e 512 pixels no manifesto do app web, além de uma versão "maskable" para ícones adaptativos.
- Os navegadores atuais também suportam favicons em SVG; um único arquivo vetorial cobre todos os tamanhos.
Na prática, colocar 16, 32 e 48 pixels dentro do favicon.ico atende navegadores de desktop e sistemas antigos, enquanto os tamanhos maiores são fornecidos como arquivos PNG separados.
Suporte em sistemas, navegadores e programas
O Windows lê e grava ICO nativamente; o Explorador, os atalhos e a área de trabalho trabalham com ele. Segundo a MDN, Chrome, Edge, Firefox, Opera e Safari exibem arquivos ICO. O macOS usa seu próprio formato ICNS para ícones de aplicativos, mas o Pré-Visualização abre ICO. Editores como o GIMP abrem um ICO como arquivo em camadas, uma camada por tamanho. A MDN desaconselha ICO em conteúdo web em geral e observa que os favicons migraram para PNG com um elemento <link>.
Pontos fortes e fracos
| Pontos fortes | Pontos fracos |
|---|---|
| Vários tamanhos e profundidades de cor em um arquivo | Máximo de 256x256 pixels |
| Suporte universal no Windows | Sem uso na web além dos favicons |
| Canal alfa e compressão PNG (Vista em diante) | Entradas antigas baseadas em BMP são grandes e desajeitadas |
| Navegadores procuram automaticamente um favicon.ico na raiz | Exige uma ferramenta própria; nem todo programa consegue gravá-lo |
Problemas comuns e como resolvê-los
Renomear um PNG para .ico não basta?
Alguns navegadores toleram, mas não é um ICO de verdade: não há diretório de ícones, e o Windows não o aceita como ícone. O certo é converter a imagem em um ICO real. Nossas ferramentas de PNG para ICO e de JPG para ICO sempre gravam quadrados de 16, 32 e 48 pixels e adicionam 64, 128 e 256 quando a imagem é grande o bastante. Cada tamanho é incorporado como PNG, então a transparência é preservada.
O favicon fica borrado ou ilegível
Linhas finas e textos pequenos somem em 16 pixels. Use uma marca simples, forte e de alto contraste; se preciso, use só o símbolo do seu logotipo. Uma origem quadrada de pelo menos 256x256, de preferência 512x512 pixels, dá o melhor resultado.
Uma imagem não quadrada fica achatada ou esticada
Ícones são quadrados. Nossas ferramentas nunca esticam a imagem: elas a centralizam em um quadrado mantendo as proporções e deixam as bordas transparentes. Para um quadrado perfeito, recorte antes uma área quadrada com recortar imagem.
O novo favicon não aparece
Os navegadores guardam favicons em cache por muito tempo. Renomear o arquivo ou adicionar um parâmetro de versão (/favicon.ico?v=2), e verificar se o servidor retorna o tipo MIME correto, costuma resolver. O ícone nos resultados da Pesquisa Google só é atualizado depois que o site é rastreado novamente.
O Windows continua mostrando o ícone antigo
O Windows guarda os ícones em um cache separado. Recompilar o aplicativo e recriar o atalho, ou sair da sessão e entrar de novo, muitas vezes basta.
Dicas de conversão
- Um ICO não basta para um site: o gerador de favicon produz de uma vez favicon.ico (16, 32 e 48 pixels), favicon-48x48.png, apple-touch-icon.png (180 pixels), icon-192.png, icon-512.png, um icon-512-maskable.png e o site.webmanifest, além de icon.svg quando a origem é um SVG. Ele também entrega o trecho de código para colar no
<head>da sua página. - O ícone da Apple precisa de fundo opaco: o iOS mostra as áreas transparentes como pretas e arredonda os cantos por conta própria, então o gerador de favicon preenche o apple-touch-icon com a cor de fundo que você escolher.
- Se o seu logotipo é um SVG: gere um PNG grande com SVG para PNG e converta-o para ICO, ou entregue o SVG diretamente ao gerador de favicon.
Nossas ferramentas de ICO e favicon funcionam no seu navegador; sua imagem não é enviada e nunca sai do seu dispositivo.
Perguntas frequentes
Qual é o tamanho máximo de uma imagem ICO?
Os campos de largura e altura de uma entrada de diretório têm um byte cada, e 0 significa 256. Portanto, uma única imagem dentro de um ICO tem no máximo 256x256 pixels.
Devo usar ICO ou PNG no meu favicon?
Use os dois. Um favicon.ico na raiz com 16, 32 e 48 pixels atende navegadores antigos e solicitações automáticas; declare ícones PNG (e, se quiser, SVG) com tags <link> para navegadores atuais e dispositivos móveis.
O ICO suporta transparência?
Sim. Os ICO antigos usam uma máscara de 1 bit, as imagens de 32 bits têm canal alfa completo desde o Windows XP, e o PNG incorporado leva transparência desde o Vista.
Como converter um arquivo ICO para PNG?
Adicione seu ICO ao conversor de imagens e escolha PNG como destino. Se o arquivo tiver vários tamanhos, o maior é usado.
Arquivos ICO são usados no Mac?
O macOS usa o formato ICNS para ícones de aplicativos. Para sites, favicon.ico e ícones PNG funcionam nos navegadores de qualquer sistema operacional.
