Pular para o conteúdo
ImageConverter

Conversão segura no servidor

Converter SVG para ICO

Transforme um SVG num ícone ICO do Windows com versões de 16, 32, 48 e 256 pixels dentro. De todas as conversões deste site, esta é aquela em que o formato de origem é exatamente o certo para o trabalho: cada tamanho é desenhado a partir das suas formas originais em vez de reduzido a partir de um bitmap.

Excluído automaticamente Arquivos excluídos em até 30 minutos

Arraste e solte suas imagens SVG aqui

Adicione várias de uma vez. Cada arquivo é processado e depois excluído do nosso servidor.

Até 20 MB por arquivo Aceita lotes

Passo a passo

Como converter SVG para ICO em 3 passos

  1. Adicione seu SVG

  2. Não há nada para configurar

    Cada tamanho padrão é renderizado a partir do vetor.

  3. Baixe o seu .ico

Comparação de formatos

SVG vs. ICO

SVG (Scalable Vector Graphics)

Vetorial

Descreve formas e texto como instruções em vez de pixels, então pode ser desenhado com nitidez em qualquer tamanho.

  • Nítido em qualquer tamanho, do favicon ao outdoor
  • Arquivos muito pequenos para logotipos, ícones e diagramas
  • Não consegue representar uma fotografia, e muitos aplicativos não conseguem importá-lo

ICO (ícone do Windows)

Ícone de vários tamanhos

Reúne vários tamanhos da mesma imagem pequena em um único arquivo, para ícones do Windows e favicons de sites.

  • Vários tamanhos de ícone em um único arquivo
  • Todos os navegadores o reconhecem como favicon
  • Só para imagens pequenas: cada uma tem no máximo 256 × 256 pixels

Por que uma origem vetorial é realmente melhor aqui

Qualquer outro caminho até um ícone parte de um bitmap e o reduz. Reduzir tira a média dos pixels entre si, e nos tamanhos em que os ícones vivem (16 e 32 pixels) essa média é brutal. Uma linha nítida de um pixel numa imagem de 256 pixels vira uma leve sugestão cinza em 16.

Um SVG não são pixels, são instruções. Então a versão de 16 pixels é desenhada em 16 pixels, e é o renderizador quem decide como posicionar as bordas nessa escala, em vez de derivá-la de uma imagem maior. As linhas caem em pixels inteiros, as formas continuam fechadas e o contraste sobrevive.

A diferença aparece claramente numa aba do navegador, e é por isso que designers mantêm os ícones como vetores e exportam os bitmaps no final.

A transparência é mantida como deve ser

Designs SVG quase sempre são desenhados sobre transparência, e isso passa direto. Onde o seu design não cobre, o ícone é realmente transparente, então fica bom numa aba clara, numa escura, numa barra de tarefas colorida ou em qualquer outra coisa.

Designs não quadrados são centralizados numa tela quadrada com preenchimento transparente em vez de esticados, então as proporções são mantidas e nenhum fundo aparece.

O que ainda exige cuidado

Um detalhe invisível em 16 pixels é pior que inútil: vira ruído que embaralha a forma. Se o seu logotipo tem traços finos, texto pequeno ou um contorno fino, eles não vão ser lidos, por melhor que sejam renderizados.

Conjuntos de ícones profissionais resolvem isso desenhando designs simplificados separados para os tamanhos pequenos: menos elementos, traços mais grossos, às vezes só uma inicial. Se o seu ícone importa, vale a pena fazer isso: exporte um SVG simplificado, crie um ICO com ele e use para os tamanhos pequenos.

As fontes são uma armadilha. Se o seu SVG cita uma fonte pelo nome em vez de embutir as formas das letras, o renderizador a substitui pela que tiver, e o seu logotipo tipográfico pode sair em algo totalmente diferente. Converta o texto em contornos no seu editor antes de exportar.

Qualidade

Qualidade e tamanho do arquivo

Não há ajuste de qualidade. Cada tamanho é renderizado a partir do vetor e guardado sem perda, que é o melhor resultado possível a partir de qualquer origem.

Regras de design que realmente importam em 16 pixels

  • Uma única ideia. Uma marca, uma letra, uma silhueta. Não uma cena, nem um logotipo tipográfico, nem um logotipo com slogan.
  • Traços não mais finos que mais ou menos 1/16 da largura. Tudo o que for mais fino some no menor tamanho.
  • Bom contraste tanto no claro quanto no escuro. As abas do navegador vêm dos dois tipos, e um ícone que some num deles falha metade das vezes.
  • Deixe um pouco de respiro: um design que vai até a borda parece apertado ao lado de outras abas.

Teste pequeno, nos dois temas

Olhe a versão de 16 pixels em tamanho real sobre branco e sobre um fundo quase preto. A maioria dos problemas de ícones é invisível em qualquer outro tamanho e evidente nesse.

Para um site, pegue o conjunto completo

Um ICO sozinho deixou de ser suficiente há anos. O gerador de favicon pega o mesmo SVG e produz todo o conjunto moderno (o ICO mais os tamanhos PNG que a Apple e o Android procuram, e as entradas do manifesto), que é o que um site realmente precisa.

É seguro enviar um SVG?

É uma pergunta razoável, porque o SVG é o único formato de imagem que na verdade é um programa: pode conter scripts e referências a recursos externos.

Cada SVG é verificado antes que qualquer coisa o analise. Arquivos que declaram tipos de documento ou entidades, que contêm scripts ou que fazem referência a recursos externos são recusados de cara em vez de limpos, e além disso o renderizador ignora referências externas. Como o resultado é um bitmap renderizado, nada do seu arquivo poderia rodar em lugar nenhum.

Onde colocar o arquivo

Chame-o de favicon.ico e coloque na raiz do seu site (/favicon.ico), não numa pasta de recursos. Os navegadores pedem esse caminho exato sem ninguém mandar, e o mesmo fazem leitores de feeds RSS, aplicativos de chat que geram prévias de links e gerenciadores de favoritos.

Você também pode declará-lo no seu HTML, mas o arquivo na raiz é o que pega todos os clientes que não leem o seu código antes.

Por que não usar simplesmente um favicon SVG?

Dá para usar, e os navegadores modernos suportam: <link rel="icon" href="/icon.svg"> funciona no Chrome, no Firefox e no Safari, e continua nítido em qualquer tamanho, até em telas que ainda não existem.

O que ele não cobre é tudo o que não é um navegador moderno: atalhos do Windows, instaladores, clientes antigos e o pedido automático de /favicon.ico. A resposta comum é usar os dois: um ícone SVG declarado no HTML e um ICO na raiz como reserva. Esta ferramenta cria o segundo a partir do primeiro.

Recuperar o design de um ícone antigo

No sentido contrário, ICO para PNG extrai a maior imagem de um ícone existente. Você recebe um bitmap, não vetores (um ICO não contém informação de formas para recuperar), mas muitas vezes é suficiente para redesenhá-lo.

O que acontece com o seu arquivo

Os navegadores não conseguem gravar o contêiner ICO, então isso é feito no nosso servidor. O que você envia é excluído assim que a conversão termina, o resultado é excluído assim que você o baixa, e tudo o que fica abandonado é removido automaticamente.

Privacidade

O que acontece com seu arquivo

Esta ferramenta funciona no nosso servidor, então dá o mesmo resultado em qualquer celular ou computador. Seu arquivo é enviado, e é exatamente isto que acontece com ele:

  • Guardado fora da área pública do servidor com um nome aleatório, nunca com o nome do seu arquivo.
  • É processado, e o arquivo original é excluído imediatamente, tenha a conversão funcionado ou não.
  • O resultado fica atrás de um link assinado que só você recebe, que para de funcionar depois de 20 minutos, e o arquivo é excluído assim que você o baixa.
  • O que nunca for baixado é excluído automaticamente em até 30 minutos.
  • A imagem em si nunca é registrada nem guardada. Se uma conversão falhar, anotamos os formatos envolvidos e o erro, não o arquivo.
  • Os metadados da câmera, incluindo as coordenadas GPS que registram onde a foto foi tirada, são removidos do resultado. Só é mantida a rotação necessária para mostrar a imagem na posição certa.

Perguntas e respostas

SVG para ICO: perguntas frequentes

Por que um SVG é uma origem melhor para um ícone do que um PNG?

Porque cada tamanho é desenhado a partir das suas formas originais em vez de reduzido a partir de um bitmap. Reduzir tira a média dos pixels, e em 16 pixels isso é brutal: uma linha nítida de um pixel numa imagem de 256 vira uma leve sugestão cinza. Renderizar em 16 deixa as bordas caírem em pixels inteiros e mantém o contraste. A diferença aparece numa aba do navegador.

A transparência é mantida?

Sim, como deve ser. Designs SVG quase sempre são desenhados sobre transparência e isso passa direto, então o ícone fica bom numa aba clara, numa escura ou numa barra de tarefas colorida. Designs não quadrados são centralizados com preenchimento transparente em vez de esticados.

Meu logotipo tem detalhes finos. Vai funcionar?

Provavelmente não em 16 pixels, por melhor que seja renderizado: traços finos e texto pequeno viram ruído que embaralha a forma. Conjuntos de ícones profissionais desenham designs simplificados separados para os tamanhos pequenos: menos elementos, traços mais grossos, às vezes só uma inicial. Se o ícone importa, exporte um SVG simplificado e crie com ele os tamanhos pequenos.

Meu texto saiu com a fonte errada.

Seu SVG cita uma fonte pelo nome em vez de embutir as formas das letras, então o renderizador a substituiu pela que tinha. Converta o texto em contornos no seu editor antes de exportar: vale fazer isso com qualquer design que saia do seu computador.

Posso usar só um favicon SVG?

Em parte. Os navegadores modernos suportam <link rel="icon" href="/icon.svg"> e ele continua nítido em qualquer tamanho. Ele não cobre atalhos do Windows, instaladores, clientes antigos nem o pedido automático de /favicon.ico que os navegadores fazem por conta própria. A resposta comum é usar os dois: um SVG declarado no HTML e um ICO na raiz.

É seguro enviar um SVG?

Cada SVG é verificado antes que qualquer coisa o analise: arquivos com declarações de tipo de documento, entidades, scripts ou referências externas são recusados em vez de limpos, e além disso o renderizador ignora referências externas. Como o resultado é um bitmap renderizado, nada do seu arquivo poderia rodar em lugar nenhum.

Continue explorando

Ferramentas de imagem relacionadas

Ver todas as ferramentas

Gerador de favicon

Gere um conjunto completo de favicon a partir de uma imagem: ICO com vários tamanhos, ícone de toque da Apple, ícones Android, manifesto e o HTML pronto.

No nosso servidor

Converter PNG para ICO

Converta PNG num ICO com vários tamanhos do jeito certo, com versões de 16, 32, 48 e 256 pixels. A transparência é mantida.

No nosso servidor

Converter SVG para PNG

Converta SVG para PNG em qualquer resolução, com a transparência intacta. É renderizado a partir do vetor, então as bordas ficam nítidas em qualquer tamanho.

No nosso servidor

Converter ICO para PNG

Converta arquivos ICO do Windows para PNG mantendo a transparência. Extrai a maior imagem que o ícone contém.

No nosso servidor