O código desta página não rodou.

Abrir o index.html direto de uma pasta bloqueia os módulos de JavaScript, então não vai acontecer nada quando você escolher uma imagem. Sirva a pasta por http:

powershell -ExecutionPolicy Bypass -File serve.ps1

Depois abra http://localhost:8080/.

Imagem para ICO — criador de favicon e de ícone do Windows e do macOS

Uma imagem entra. Sai todo tamanho que um navegador, o Windows ou um Mac pede.

Idioma: Português
Ver o código-fonte
Seus imagens são processados no navegador. Sem envio para processamento.

A escala e os próprios arquivos de ícone são feitos no seu próprio navegador. A imagem é desenhada pelo canvas que o seu navegador já traz, e cada contêiner, tanto o .ico do Windows quanto o .icns do macOS, é montado a partir daqueles pixels por umas duas centenas de linhas em src/ico.js e src/icns.js que você pode ler. Esta ferramenta não tem função de rede de espécie alguma: não há o que buscar nem o que mandar. E do outro lado desta página não existe servidor nenhum para onde mandar uma logomarca, mesmo que houvesse caminho.

Verificação ao vivo: verificando…

Offline: verificando…

Você não precisa confiar na nossa palavra. Abra as ferramentas do desenvolvedor, deixe a aba “Rede” à vista e crie um ícone. Nenhuma requisição leva uma imagem, uma miniatura, um nome de arquivo ou um byte do que você escolheu. Ou então desligue a internet e crie um assim mesmo.

1 Escolha uma imagem

2 Diga para que serve o ícone

Um arquivo de ícone não é uma imagem, são várias: a mesma logomarca desenhada de novo em cada tamanho que a coisa que vai lê-la pede. Quais tamanhos são esses não é questão de gosto. Um navegador quer três deles, um aplicativo num notebook de alta densidade quer dez, um Mac quer os dez dele, e algo escrito antes do Windows Vista quer os tamanhos guardados de um jeito completamente diferente.

Ícone do Windows, em .ico Lido por todo navegador como favicon, e pelo Windows para um aplicativo, um atalho e uma pasta. Os tamanhos são escolha sua, aí embaixo.

Ícone do macOS, em .icns O que um pacote de aplicativo de Mac carrega. A Apple nomeia exatamente dez vagas, de 16 pixels a 1024, então não há o que escolher: as dez entram, desenhadas a partir de sete renderizações, já que uma vaga Retina e o tamanho de cima são a mesma imagem.

O resto do conjunto de ícones de um site Um .ico cobre a aba do navegador e o Windows. Ele não cobre uma tela inicial de iPhone, um aviso de instalação do Android, nem um ladrilho fixado no menu Iniciar, porque esses leem um PNG de 180px, um manifesto de aplicativo web e um arquivo XML, e nenhum deles vai olhar dentro de um .ico. Marque esta caixa e você leva todos eles também, o manifesto, e o bloco de HTML para colar na sua página.

O que fazer

Os tamanhos que entram no .ico

Como ele é desenhado

3 Confira no tamanho em que ele vai ser visto

Esta é a parte que vale olhar antes de baixar qualquer coisa. Uma logomarca que se lê perfeitamente a 512 pixels tem dezesseis pixels de largura numa aba de navegador, e as partes finas dela não sobrevivem a isso: os traços de uma logomarca escrita, uma borda de fio de cabelo, um gradiente. Cada quadrado abaixo é desenhado no tamanho real a partir do arquivo que você escolheu.

Ver como Markdown

Como criar um arquivo .ico sem enviar nada

  1. Escolha a imagem. Arraste um PNG, JPEG, WebP ou SVG até o seletor, ou escolha várias e converta todas de uma vez. Quadrada é o mais fácil, e qualquer coisa a partir de 256 pixels tem detalhe suficiente para todos os tamanhos. Quem lê o arquivo direto do seu disco é o navegador, e nada é mandado para lugar nenhum enquanto você faz isso.
  2. Escolha os arquivos de que você precisa. O Windows e um navegador leem .ico, e um Mac lê .icns e nem olha para o outro. Marque um, ou os dois, se a coisa que você está fazendo sai nas duas plataformas. Um site quer também as imagens extras da Apple, do Android e do ladrilho, e essa é a terceira caixinha.
  3. Diga para que serve o ícone. Um favicon de site tem 16, 32 e 48 pixels. Um aplicativo do Windows quer 256 também. Um aplicativo que precisa ficar bom num notebook de alta densidade quer os tamanhos intermediários que o Windows pede a 125% e 150% de escala. Escolha o que corresponde ao trabalho, ou marque os tamanhos você mesmo. Cada tamanho da lista diz quem pede por ele. O .icns não tem essa escolha: a Apple nomeia exatamente dez vagas e as dez entram.
  4. Resolva o formato e o fundo. Um ícone é quadrado e a maioria das logomarcas não é. Completar com margem mantém a imagem inteira com espaço acima e abaixo, cortar pega o meio, e esticar achata. A transparência é mantida como transparência, a menos que você escolha uma cor para ficar atrás dela.
  5. Olhe o de 16 pixels antes de baixar. É nesse tamanho que o ícone vai ser visto na maior parte das vezes, e é ali que traços finos e letras pequenas somem. Cada quadrado da pré-visualização é desenhado no tamanho real a partir do seu próprio arquivo. Se o menor deles for um borrão, o conserto é um desenho mais simples, e não outro ajuste.
  6. Leve os arquivos. Um .ico com todos os tamanhos dentro, chamado favicon.ico quando foi isso que você pediu, porque é esse o endereço que os navegadores procuram. Um .icns ao lado, se você marcou aquilo, pronto para entrar num pacote de aplicativo de Mac. Marque também o conjunto de site e você leva ainda as imagens da Apple, do Android e do ladrilho do Windows, o manifesto, e o bloco de HTML para colar na sua página. Qualquer coisa além de um arquivo só baixa num zip.

A versão longa

Como criar um favicon que ainda se lê a dezesseis pixels De quais tamanhos um favicon.ico realmente precisa, quais arquivos extras o iPhone, o Android e o Mac pedem, e por que uma logomarca que funciona num cartaz desaparece a dezesseis pixels.

Perguntas

Minha imagem é enviada para algum lugar?

Não. Quem decodifica e escala a imagem é o seu próprio navegador, no seu próprio hardware, e o .ico é montado a partir daqueles pixels por código servido por esta página. Esta ferramenta não tem função de rede de espécie alguma: nunca busca nada e nunca manda nada. E a Content-Security-Policy da página lista todos os endereços que ela pode acessar, nenhum dos quais é deste site.

Quais tamanhos um favicon.ico deve conter?

16, 32 e 48. Isso não é preferência: 16 é o que um navegador desenha numa aba, 32 é o que o Windows usa para um atalho de área de trabalho e o que vários navegadores usam para um favorito, e 48 é o tamanho em que o Google lê o ícone de um site. Qualquer coisa maior pertence a um PNG ao lado do .ico em vez de dentro dele, que é justamente o que o conjunto de site daqui produz.

De quais tamanhos precisa um ícone de aplicativo do Windows?

16, 32, 48 e 256, que é o que o próprio app.ico padrão do Visual Studio guarda. 16 é a barra de título e a visualização pequena do Explorer, 32 é a área de trabalho e a barra de tarefas, 48 são os ícones médios do Explorer, e 256 é o menu Iniciar e a visualização extragrande. Numa tela de alta densidade o Windows também pede 20, 24, 40, 64 e 96, e reamostra a partir do tamanho mais próximo que tiver se eles não estiverem lá. A predefinição de “todas as escalas” já coloca esses.

Por que o arquivo ficou maior que a imagem de onde eu parti?

Porque um .ico não é uma imagem, são várias, e as pequenas são guardadas sem compressão para que qualquer coisa consiga lê-las. Uma entrada de 32x32 tem exatamente 4.264 bytes, seja lá o que houver nela, e uma entrada de 256x256 sem compressão tem 264 KB. É por isso que tamanhos acima de 64 são guardados como PNG por padrão. Escolher “PNG em todos os tamanhos” gera o menor arquivo possível, e escolher sem compressão em todos os tamanhos gera o mais compatível.

Qual a diferença entre as entradas em PNG e as sem compressão?

Só como os pixels são guardados dentro do .ico. Uma entrada sem compressão é o arranjo original do Windows, com um cabeçalho de bitmap, os pixels de cabeça para baixo e uma máscara de transparência de um bit, e toda versão do Windows já lançada consegue ler. Uma entrada em PNG é um arquivo PNG inteiro enfiado dentro do ícone, o que é de três a dez vezes menor nos tamanhos grandes, mas só passou a ser entendido a partir do Windows Vista. O padrão usa cada um onde ele ganha: sem compressão até 64 pixels, PNG acima disso.

Ele consegue fazer um ícone maior que 256 pixels?

Não, e nada consegue. O formato guarda cada lado num único byte, e o 0 já está tomado, porque significa 256. Esse é o teto, então um .ico contendo uma imagem de 512 pixels não é um ícone maior, é um ícone quebrado. Se você precisa de 512, precisa de um PNG, que é o que o conjunto de site inclui para o Android e para a tela de abertura de um aplicativo web.

Ele mantém a transparência?

Mantém, nos dois tipos de entrada, e ainda escreve a antiga máscara de um bit ao lado do canal alfa, para que software velho demais para ler o alfa ainda recorte o ícone em vez de desenhar uma caixa preta. O único arquivo que é deixado opaco de propósito é o ícone de toque da Apple no conjunto de site, porque o iOS o compõe sobre o próprio ladrilho e transforma transparência em preto. Ele é achatado sobre a sua cor de fundo, branca por padrão.

Minha logomarca é escrita e larga. O que acontece com ela?

Alguma coisa tem que acontecer, porque um ícone é quadrado. Completar com margem mantém tudo e deixa pequeno: uma logomarca escrita completada dentro de um quadrado de 16 pixels fica com uns três pixels de altura e ilegível. Cortar pelo meio costuma funcionar melhor, então tire o símbolo da composição e use aquilo, como quase toda marca faz no favicon dela. A pré-visualização mostra qual dos dois sobrevive antes de você baixar qualquer coisa.

O que tem no conjunto de site, e eu preciso de tudo aquilo?

Sete PNGs, um manifesto de aplicativo web, um browserconfig.xml e um bloco de HTML para colar. Você precisa deles porque um .ico cobre navegadores e Windows e nada mais: uma tela inicial de iPhone lê um PNG de 180 pixels com um nome próprio, o Android e todo aviso de instalação leem o manifesto, e um ladrilho fixado no menu Iniciar lê o XML. Nenhum deles vai olhar dentro de um .ico. Tudo é gerado aqui, no seu computador, e o zip vem com uma nota dizendo para que serve cada arquivo.

Ele também faz um ícone de macOS?

Faz. Marque ícone do macOS e você recebe um .icns ao lado do .ico, ou no lugar dele. É outro contêiner para a mesma ideia, e nenhum dos dois sistemas lê o do outro: o Windows quer .ico e um pacote de aplicativo de Mac quer .icns. Ali os tamanhos não são escolha, porque a Apple publica exatamente dez vagas, de 16, 32, 64, 128, 256, 512 e 1024 pixels, com três delas aparecendo duas vezes como a versão Retina do tamanho de baixo. As dez entram, desenhadas a partir de sete renderizações, e é por isso que um .icns é o arquivo maior.

Como eu uso o arquivo .icns?

Para um aplicativo, ele vai no pacote em YourApp.app/Contents/Resources/ e é nomeado no Info.plist sob CFBundleIconFile. Toda ferramenta de empacotamento de Mac tem um campo para isso. Para qualquer outra coisa, selecione o arquivo no Finder, aperte Command-C, depois Obter Informações na pasta ou imagem de disco que você quer mudar, clique no ícone pequeno no canto superior esquerdo e aperte Command-V.

O .icns é igual ao que o iconutil faz?

São as mesmas dez vagas com os mesmos tipos de quatro letras, e PNG em cada uma, que é o que o iconutil produz a partir de uma pasta .iconset. Existe uma diferença de propósito: a ferramenta da Apple também escreve um elemento TOC , um índice dos tipos e tamanhos que vêm depois. É uma otimização e não parte do formato, já que um leitor sem ele percorre os elementos de ponta a ponta e chega à mesma resposta. E um índice errado é pior que índice nenhum, então ele fica de fora.

Posso converter várias imagens de uma vez?

Pode. Toda imagem da lista vira o próprio .ico com os mesmos ajustes, e o lote inteiro baixa num zip só, com uma pasta por imagem, senão duas delas se chamariam favicon.ico e uma sobrescreveria a outra. Toda saída que você marcou é feita para toda imagem. Clique em qualquer linha para pôr aquela imagem na pré-visualização.

É grátis, e preciso de conta?

É grátis, e não tem conta, nem login, nem período de teste, nem marca d'água. Também não tem limite para o número nem para o tamanho dos arquivos, porque não existe servidor pagando por eles: o trabalho acontece no seu próprio computador. O site exibe publicidade, e é ela que paga a conta. Os anúncios não recebem nada sobre as suas imagens.

Funciona offline?

Funciona. Carregue a página uma vez, depois desligue a internet e ela continua funcionando. Esse é também o jeito mais simples de provar que nada está sendo enviado: uma ferramenta que mandasse a sua logomarca embora para ser convertida pararia no instante em que você tirasse da tomada.