A maioria dos conselhos favicon é uma lista de uma dúzia de tamanhos PNG copiados de um gerador que foi escrito em 2014 A maioria desses tamanhos não faz mais nada O que um site precisa hoje é curto: um favicon.ico para os navegadores e ferramentas que ainda o procuram, um ícone escalável ou de alta resolução para tudo o que é moderno, e um ícone de toque para telefones A parte que faz as pessoas tropeçarem é o próprio .ico, porque não é uma imagem com uma extensão ímpar É um pequeno recipiente contendo várias imagens.
Este guia cobre como um arquivo ICO é construído, quais tamanhos pertencem dentro de um favicon.ico e por quê, quais outros arquivos de ícones um site precisa ao lado dele e os erros que fazem um ícone parecer suave ou ilegível em uma guia do navegador Ele fica sob o hub de ferramentas de imagem, e cada tamanho citado para o conversor Toolz vem de seu código-fonte.
tl;dr: Um arquivo ICO é um contêiner: um diretório curto seguido por várias imagens quadradas, uma por tamanho, a partir do qual o navegador ou sistema operacional escolhe a correspondência mais próxima Para um favicon.ico, inclua 16, 32 e 48 px, e adicione 256 px se o mesmo arquivo dobrar como um ícone do Windows Cada entrada pode conter no máximo 256 x 256 pixels Ao lado dele, declare um SVG ou grande ícone PNG e um 180 x 180
apple-touch-icon. o Conversor PNG para ICO escreve entradas de 16, 32, 48 e 256 px como PNG com transparência, lado do cliente, nada carregado, grátis, sem inscrição.
O que é um arquivo ICO?
Um arquivo ICO é o formato de ícone do Windows: um cabeçalho, um diretório listando cada imagem dentro e os dados de imagem para cada entrada A Microsoft documentou o layout em seu Artigo técnico de ícones, e tem sido o formato para ícones de programas, atalhos e pastas do Windows desde as primeiras versões do Windows Os navegadores o adotaram para favicons no final dos anos 1990, e é por isso que o arquivo na maioria dos sites ainda é chamado favicon.ico.
O diretório é o que o torna diferente de um PNG ou JPG. Software que precisa de um ícone a 16 pixels lê o diretório, encontra a entrada mais próxima de 16 e desenha essa Uma guia, uma lista de favoritos, um botão da barra de tarefas e um atalho da área de trabalho podem tirar cada um uma imagem diferente do mesmo arquivo Isso permite que um designer forneça uma marca simplificada para os tamanhos minúsculos e uma detalhada para os tamanhos grandes, em vez de deixar uma única imagem ser dimensionada em todos os lugares.
O formato passa por dois tipos de mídia. Listas da IANA image/vnd.microsoft.icon, enquanto a maioria dos servidores e navegadores usam os mais antigos image/x-icon. Ambos funcionam para um favicon.
Como é estruturado um arquivo ICO?
Um arquivo ICO começa com um cabeçalho de 6 bytes, seguido por uma entrada de diretório de 16 bytes por imagem, seguida pelos dados da imagem Todos os números são little-endian.
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
Dois detalhes nesse layout explicam a maioria das coisas confusas sobre os ícones.
O teto de 256 pixels vem de um único byte. Largura e altura são cada um armazenados em um byte, que pode conter de 0 a 255 O formato reutiliza 0 para significar 256, e não há como expressar nada maior Uma entrada 512 x 512 não pode existir em uma ICO válida, o que quer que um gerador afirme.
As entradas podem ser PNG. Os primeiros ícones armazenavam todas as imagens como um bitmap não compactado com uma máscara de transparência separada de 1 bit. Desde o Windows Vista, uma entrada pode conter um arquivo PNG completo, que é muito menor em tamanhos grandes e carrega um canal alfa adequado. Um ícone de 256 x 256 armazenado como um bitmap descompactado de 32 bits tem aproximadamente 256 KB; a mesma imagem do PNG geralmente é uma fração disso.
O conversor Toolz escreve a variante moderna Seu construtor ICO define o tipo 1, uma entrada de diretório por tamanho com planos 1 e 32 bits por pixel, escreve 256 como 0 e armazena cada entrada como um PNG com seu canal alfa Pedindo-lhe um tamanho fora de 1 a 256 é recusado antes que qualquer coisa seja escrita, porque o diretório não tem como gravá-lo.
Qual deve ser o tamanho de um favicon?
Um favicon.ico deve conter imagens de 16 x 16, 32 x 32 e 48 x 48 e uma imagem de 256 x 256 se você também quiser que o arquivo funcione como um ícone do Windows Além do .ico, os navegadores modernos preferem um SVG ou um PNG grande declarado com uma tag de link e os telefones usam um ícone de toque separado.
Esta tabela mapeia cada tamanho para onde ele é usado O comportamento exato varia com o navegador, sistema operacional e escala de exibição, então trate-o como o caso comum:
| Tamanho | Onde aparece | Necessário em favicon.ico? |
|---|---|---|
| 16x16 | Guias do navegador, barra de endereço, marcadores em displays padrão | sim |
| 32x32 | Guias em monitores de alta densidade, barra de tarefas do Windows e atalhos | sim |
| 48x48 | Atalhos de desktop do Windows, visualizações de ícones médios; A Pesquisa do Google recomenda ir maior do que isso | sim |
| 256x256 | Visualizações de ícones grandes e extra grandes do Windows | Somente se usado como ícone do Windows |
| 180x180 | Tela inicial do iPhone e iPad (apple-touch-icon) |
Não, PNG separado |
| 192x192 | Tela inicial do Android, manifesto do aplicativo da web | Não, PNG separado |
| 512x512 | Web app manifesta, instala e espirra telas | Não, não cabe na ICO |
| Qualquer (SVG) | Navegadores modernos que suportam ícones SVG, incluindo variantes de modo escuro | Não, SVG separado |
Nos resultados da pesquisa, Diretrizes do favicon do Google' peça um ícone quadrado e recomende um maior que 48 x 48 pixels, e o Google o busca a partir do ícone declarado em sua página inicial Um .ico que chega a 16 pixels é uma razão comum para um ícone do site' s parecer desfocado ao lado de seu resultado de pesquisa.
Quais arquivos favicon um site precisa?
Um site precisa de três arquivos de ícones e uma entrada de manifesto para cobrir todos os navegadores e dispositivos convencionais Mais do que isso é quase sempre sobras.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Cada linha tem um trabalho:
favicon.icoé o fallback. O Padrão HTML WHATWG permite que os navegadores solicitem/favicon.icoa partir da raiz do site quando uma página declara nenhum ícone em tudo, e leitores RSS, rastreadores e ferramentas mais antigas ainda fazem Mantenha o arquivo na raiz, mesmo se você declarar outros ícones.icon.svgé o ícone nítido para navegadores que suportam favicons SVG. Ele é dimensionado para qualquer densidade e pode incluir umprefers-color-schemeconsulta de mídia para que o ícone se adapte às guias escuras Nem todo navegador o honre, e é por isso que o .ico permanece.apple-touch-icon.pngem 180 x 180 é o que o iOS usa quando alguém adiciona seu site à tela inicial Dê um fundo opaco, já que o iOS não mantém a transparência nos ícones da tela inicial.- Os ícones de manifesto em 192 e 512 são o que os navegadores baseados em Android e Chromium usam quando um site é instalado como um aplicativo, conforme descrito no Manifesto de aplicação da Web W3C.
o sizes atributo no link .ico importa de uma maneira Quando um navegador vê um SVG e um tamanho .ico, ele pode dizer o SVG é a escolha escalável Algumas configurações usam sizes="any" no .ico em vez disso, e algumas versões do Chrome responderam escolhendo o .ico sobre o SVG Um tamanho específico evita isso.
Por que meu favicon parece borrado ou errado?
A maioria dos problemas de favicon vem da imagem de origem, não do formato A ICO armazena o que quer que seja dado em cada tamanho, e o dimensionamento só pode ir bem em uma direção.
| Sintoma | Causa | Consertar |
|---|---|---|
| Entrada suave e manchada de 256 px | Fonte menor que 256 px, então foi esticada | Comece com uma exportação 512 x 512 ou maior |
| Logotipo esmagado ou esticado | Fonte não quadrada esticada ao quadrado | Cortar ou almofada para quadrado antes de converter |
| Marca do Word ilegível na guia | O texto desenhado a 16 px tem dois pixels de altura | Use o símbolo sozinho para 16 e 32 px |
| O contorno fino desaparece | Traços abaixo de 1 px em tamanhos pequenos | Traços espessos em uma variante de tamanho pequeno |
| Caixa branca em torno do ícone | A fonte JPG não tem transparência | Use um PNG com um canal alfa |
| Ícone antigo continua mostrando | Os navegadores armazenam favicons em cache agressivamente | Renomeie o arquivo ou adicione uma string de consulta e atualize |
| Nenhum ícone nos resultados do Google | Ícone abaixo de 48 px, bloqueado por robots.txt, ou não na página inicial | Sirva um ícone maior na página inicial e permita o rastreamento |
Vale a pena soletrar a primeira linha, porque ela pega designers experientes também Uma fonte de 64 px convertida com 256 ticked produz uma entrada de 256 px que é a imagem de 64 px ampliada quatro vezes É exatamente a entrada de alta densidade visualizações do Windows e grandes atalhos mostram Desaceleração de uma grande fonte é a direção que parece boa.
A terceira linha é uma questão de aritmética Um ícone de 16 x 16 tem 256 pixels no total Uma marca de palavras de cinco letras espremida nessa largura obtém cerca de três pixels por letra, e o anti-aliasing transforma aqueles em manchas cinzentas Quase todos os sites conhecidos usam uma única letra ou símbolo para seu favicon por esse motivo.
Como faço um favicon.ico a partir de uma PNG?
Exporte um PNG quadrado de pelo menos 512 x 512 pixels com um fundo transparente, converta-o para ICO com os tamanhos que você precisa e verifique a entrada de 16 px em tamanho real antes de publicar.
Usando o Conversor PNG para ICO em Toolz:
- Largue a PNG Vários podem entrar de uma vez; cada um se torna seu próprio .ico.
- Escolha os tamanhos de ícones Todas as quatro caixas, 16, 32, 48 e 256 px, são marcadas para começar Para um favicon puro, untick 256 para tornar o arquivo muito mais leve, uma vez que a entrada 256 é a maior parte do seu peso Se você desmarcar todos os quatro, o conversor volta a escrever todos os quatro em vez de produzir um ícone vazio.
- Pressione Converter para ICO. Um quadrado 512 x 512
logo.pngvolta comologo.icocom a nota " Contém ícones de 16, 32, 48, 256 px." - Baixe o arquivo ou faça um lote como
converted-ico.zip.
O conversor desenha sua imagem em uma tela em cada tamanho, codifica cada quadrado como PNG e os embala primeiro em um .ico, todo o lado do cliente, para que a arte nunca saia do dispositivo A transparência é mantida em todos os tamanhos Uma fonte não quadrada é esticada para preencher cada quadrado em vez de recortada, e a nota diz isso: solte uma marca de palavras de 1024 x 256 e relata que a imagem era 1024x256 e foi esticada para quadrados dos tamanhos que você escolheu Essa nota é a sua sugestão para cortar ou preencher primeiro.
Para obter o melhor resultado em tamanhos pequenos, faça dois PNGs: um detalhado para 48 e 256 px e um símbolo simplificado para 16 e 32 px. Converta cada um com apenas seus tamanhos marcados O conversor grava uma fonte por arquivo, então a abordagem de duas imagens fornece dois arquivos .ico; use o simplificado como favicon.ico, já que os navegadores escolhem principalmente as entradas pequenas e as detalhadas para aplicativos do Windows ou ícones de atalho.
Posso fazer uma ICO a partir de um JPG ou SVG?
Sim a ambos, com uma ressalva para cada um.
Um JPG funciona, mas cada entrada de ícone sai como um quadrado preenchido sem transparência, porque JPEG não tem canal alfa e nenhum conversor pode recuperar um Conversor JPG para ICO reamostra a foto nos mesmos quadrados de 16, 32, 48 e 256 px As fotos também perdem quase todos os detalhes a 16 px, então corte firmemente em torno de um único assunto de alto contraste e torne o quadrado da colheita antes de converter Uma foto de telefone 4032 x 3024 convertida como está é espremida horizontalmente, e a nota informa que sim.
Um SVG é a melhor fonte possível, uma vez que não tem resolução fixa e torna nítido em cada tamanho de entrada A rota depende de quanto controle você deseja O Conversor SVG para PNG renderiza o SVG para um PNG você pode inspecionar e editar primeiro; qualquer SVG cujo lado mais longo esteja abaixo de 512 px é desenhado em 512, então um SVG de ícone 24 x 24 ainda fornece uma fonte limpa para a entrada 256. Ou solte o SVG direto no geral Conversor de imagem, que aceita SVG, PNG, JPG e uma dúzia de outros formatos, e escolher ICO como o alvo para renderizá-lo e embalá-lo em uma etapa.
| Fonte | Transparência na OIC | Nitidez a 256 px | Melhor uso |
|---|---|---|---|
| VG | guardado | Afiado, renderizado a partir de vetores | Logotipos que você tem em forma vetorial |
| PNG 512 px ou maior | guardado | Afiado | Mais favicons |
| PNG abaixo de 256 px | guardado | Suave em 256 | Desmarque 256 ou reexporte maior |
| JPG | Nenhum, quadrado preenchido | Depende do tamanho da fonte | Somente ícones baseados em fotos |
| ICO existente | guardado | Reconstruído a partir da entrada que o navegador decodifica | Alterar quais tamanhos um arquivo carrega |
Um .ico existente também pode ser realimentado. O conversor nunca trata ICO para ICO como uma renomeação; ele sempre reconstrói o arquivo nos tamanhos indicados. Essa é uma maneira rápida de reduzir um favicon inchado para 16, 32 e 48, embora ele seja reconstruído a partir da única entrada que o navegador decodifica, então comece a partir da arte original, se você tiver. SVG vs PNG cobre por que vale a pena manter o mestre vetorial exatamente para esse tipo de reexportação.
Favicon.ico ainda importa em 2026?
Sim, como um fallback Os navegadores atuais usam os ícones SVG ou PNG que você declara, mas a raiz /favicon.ico ainda é o que alguns navegadores, leitores de feeds, ferramentas de favoritos e rastreadores buscam quando não encontram nenhuma declaração ou não suportam o tipo declarado. Um que está faltando também preenche os logs do servidor com 404s, uma vez que essas solicitações chegam, quer o arquivo exista ou não.
O que não importa mais é a longa cauda dos tamanhos legados Os ícones separados de toque de 57, 60, 72, 76, 114, 120, 144 e 152 pixels datam de versões mais antigas do iOS e são cobertos pelo único arquivo de 180 px. As imagens de blocos do Windows declaradas através browserconfig.xml pertencia ao Windows 8 e 10 Iniciar telhas de tela Nenhum dos dois é necessário para um novo site.
Aqui está o conjunto mínimo prático com tamanhos de arquivo a serem esperados:
| Arquivo | Tamanho do pixel | Peso típico | necessário? |
|---|---|---|---|
favicon.ico com 16, 32, 48 |
16, 32, 48 | Alguns KB | Sim, como fallback |
icon.svg |
Escalável | Menos de 2 KB para uma marca simples | recomendado |
apple-touch-icon.png |
180x180 | 5 a 20 KB | Sim, para iOS |
icon-192.png, icon-512.png |
192, 512 | 10 a 60 KB | Se o site tiver um manifesto |
A conversão de ícones no navegador é privada?
Sim. No Toolz, decodificação, redimensionamento, codificação PNG e empacotamento do .ico todos acontecem no lado do cliente, dentro da guia do navegador, então nenhuma imagem é carregada, e a página continua funcionando offline uma vez carregados Os metadados e perfis de cores anexados à fonte são descartados pela etapa da tela, que para um ícone é inofensivo.
Imagens acima de 100 megapixels e arquivos vazios são recusados com uma mensagem, e fontes SVG acima de 50 MB são recusadas As ferramentas são gratuitas, sem inscrição, com um limite diário de conversões.
