Todo outro formato de imagem no seu disco guarda uma figura. O ICO guarda várias — e entender por quê explica ao mesmo tempo para que o formato serve e por que ele sobreviveu na web muito depois de ícones do Windows deixarem de ser preocupação da maioria.
Um ICO é um contêiner. Dentro dele ficam várias imagens completas — tipicamente o mesmo ícone desenhado a 16, 32 e 48 pixels, às vezes mais — cada uma guardada separadamente, com seus próprios pixels.
Quando algo precisa de um ícone, ele escolhe do arquivo o tamanho mais próximo do que precisa, em vez de escalar uma imagem.
Esse projeto existe por causa de um limite duro: a redução automática destrói ícones pequenos. Reduza um ícone detalhado de 256 pixels para 16 e você tem um borrão cinza — 16 × 16 são 256 pixels no total, mal o suficiente para uma forma reconhecível. O único jeito de ter um ícone legível a 16 pixels é alguém desenhá-lo a 16 pixels, decidindo quais detalhes descartar e qual traço único carrega o significado.
Então o ICO não é propriamente um formato de imagem. É um jeito de entregar de uma vez as decisões de um designer sobre vários tamanhos.
O ICO vem do Windows 1.0, de 1985, o que faz sua presença contínua no desenvolvimento web parecer um acidente. Não é bem assim.
Navegadores pedem automaticamente /favicon.ico na raiz de um site, tenha a página vinculado algo ou não. Esse comportamento é muito anterior à tag moderna <link rel="icon"> e nunca foi removido, porque removê-lo quebraria um número enorme de sites antigos.
A consequência prática: se você não tem favicon na raiz, o navegador de cada visitante pede mesmo assim e recebe um 404. Custa quase nada, mas é uma requisição que nunca dá certo, para sempre.
Esses três são o conjunto clássico e seguem sendo o conteúdo certo de um ICO de favicon. Ícones modernos às vezes acrescentam 64, 128 e 256; dentro de um ICO, a entrada de 256 pixels normalmente é guardada como dados PNG em vez de pixels brutos — é isso que impede o arquivo de ficar enorme.
É o menor problema de design em uso comum, e é mais extremo do que parece. Você tem 256 pixels. Não 256 de largura — 256 no total.
O que sobrevive:
O que não:
O erro de sempre é encolher o logotipo da empresa. A maioria é desenhada para ser lida no tamanho de um cartão de visita, e a 16 pixels vira uma mancha irreconhecível. O certo é projetar uma marca à parte: o símbolo sem a parte tipográfica, ou uma letra, feita especificamente para esse tamanho.
O ICO é o piso, não o teto. Ele atende a requisição que acontece com ou sem o seu planejamento.
Converter um PNG para ICO é o caminho normal, mas há uma distinção que vale insistir. Uma conversão que pega uma imagem e a embrulha produz um ICO de tamanho único — tecnicamente válido, e joga fora a única vantagem real do formato.
O que você quer são várias imagens no arquivo: um 48, um 32 e um 16 que você olhou e ajustou. Se esse 16 saiu de uma redução automática, olhe em tamanho real antes de aceitar. Na maioria das vezes ele precisa ser simplificado à mão.
Parta de uma origem quadrada com margem generosa, porque um ícone com conteúdo encostando na borda parece apertado em qualquer tamanho.
Só ícones. Não é formato de imagem geral: nenhuma página deveria exibir um ICO como conteúdo, nenhuma fotografia deveria ser guardada assim, e nada fora do caso de ícones ganha algo com ele. Para uma imagem que você só quer pequena e nítida, o PNG resolve sem o contêiner de múltiplos tamanhos.
/favicon.ico na raiz automaticamente