UltKit

Converter SVG em ícone

Um único logo vetorial atende a todos os lugares onde você precisa de um ícone: o favicon, o atalho do Windows, o app do Mac e os ícones do inicializador nos celulares. Esta página começa num ICO com vários tamanhos e permite trocar para ICNS ou PNG para as outras plataformas.

Conversor de imagens

ou solte arquivos JPG, JPEG, JPE … aqui ·

Até 95 MB por arquivo· Até 20 arquivos· Apagados após 30 minutos

Saída

Os arquivos são processados em nossos servidores e apagados após 30 minutos.

Como usar esta ferramenta

  1. 1

    Envie um SVG quadrado

    Adicione o SVG da sua marca, de preferência com um viewBox quadrado. Você pode adicionar até 20 arquivos de uma vez, por exemplo uma versão clara e outra escura.

  2. 2

    Escolha o formato do ícone

    ICO com Tamanhos do ícone em Todos os tamanhos (16–256) já vem selecionado. Escolha ICNS em Converter para para macOS, ou PNG com uma largura em Redimensionar imagem de saída para um ícone de celular ou de loja de aplicativos.

  3. 3

    Converta e coloque os arquivos no lugar

    Clique em Converter para ICO (o texto acompanha o formato escolhido), baixe os arquivos e coloque cada um onde a plataforma espera.

Não existe um único formato de ícone. Windows e navegadores usam ICO, o macOS usa ICNS e os celulares usam conjuntos de PNGs. Partir de um SVG significa que cada um deles é redesenhado a partir do vetor, com nitidez em todos os tamanhos.

SVG em ícone: um vetor, três tipos de arquivo de ícone

Um arquivo de ícone é um contêiner de pequenos bitmaps, não um vetor. O sistema operacional escolhe o bitmap mais próximo do tamanho de que precisa, então um bom ícone tem vários, cada um renderizado para a sua própria grade.

A predefinição ICO desta página gera um arquivo com todos os tamanhos de 16 a 256 px, o que cobre favicon.ico e atalhos do Windows. Mude Converter para para ICNS para obter um contêiner de ícone da Apple, ou para PNG para os tamanhos avulsos que Android, iOS e lojas de aplicativos pedem.

A tabela lista o que as principais plataformas publicam para seus espaços de ícone.

Arquivos de ícone que cada plataforma espera
ÓrgãoExigênciaFonte
Área de trabalho e barra de tarefas do WindowsICO com vários tamanhos, incluindo 16, 32, 48 e 256 px—
Favicon do sitefavicon.ico na raiz do site com 16, 32 e 48 px; um PNG de 180 × 180 px para o apple-touch-icon—
Ícone de app do macOSICNS ou catálogo de ativos do Xcode, tamanhos de até 1024 × 1024 px—
Página do app na Google PlayPNG de 32 bits de 512 × 512 px, até 1.024 KB—
Apple App StorePNG de 1024 × 1024 px sem transparência—

SVG

Scalable Vector Graphics (SVG)

SVG é um formato vetorial baseado em XML, padronizado pelo W3C em 2001. Em vez de pixels, ele descreve formas, caminhos e texto, por isso fica nítido em qualquer tamanho e costuma ser minúsculo para logotipos e ícones. Ele aceita transparência, estilo com CSS, scripts e animação, e todos os navegadores o renderizam nativamente. O SVG não é adequado para fotografias, e ilustrações complexas podem ficar lentas para renderizar. Illustrator, Inkscape, Figma e os navegadores conseguem abri-lo e editá-lo.

Compressão
–
Transparência
Sim
Animação
Sim
Lançamento
2001 · W3C
Conversor de SVG

ICO

Ícone do Windows

ICO é o formato de ícone da Microsoft usado nos ícones de programas do Windows e nos favicons de sites. Um único arquivo .ico pode conter várias imagens em tamanhos diferentes, como 16×16, 32×32, 48×48 e 256×256 pixels, para que o sistema escolha a mais adequada. Cada imagem pode ser armazenada como bitmap ou como dados PNG e suporta transparência alfa completa. O ICO não foi feito para fotos nem para artes grandes. Navegadores, o Windows e a maioria dos editores de ícones conseguem lê-lo.

Compressão
Sem perdas
Transparência
Sim
Animação
Não
Lançamento
Microsoft
Conversor de ICO

As pessoas buscam SVG para ícone quando têm um logo vetorial e várias plataformas para atender, cada uma com seu próprio formato de ícone, do favicon.ico em um site ao ICNS em um Mac e PNGs de tamanhos definidos nas lojas de aplicativos.

Converter SVG em ícones para Windows, Mac, Android e iOS

Mantenha ICO e Tamanhos do ícone em Todos os tamanhos. Renomeie o resultado para favicon.ico para a raiz de um site, ou aponte para ele na janela Alterar Ícone de um atalho do Windows.

  • Um único .ico serve para abas, favoritos e barra de tarefas
  • Adicione um PNG de 180 px para favoritos na tela inicial do iPhone

Como desenhar um SVG que continue legível em 16 px

Um ícone de 16 × 16 px tem 256 pixels no total. A maioria das marcas mantém um símbolo separado para ícones, muitas vezes só o emblema ou uma letra, com formas marcantes e poucas cores; se o seu ainda não existe, faça uma cópia simplificada do SVG para ícones.

Confira o viewBox antes de converter. Um viewBox largo gera um ícone com faixas vazias acima e abaixo da marca, então corte-o em formato quadrado antes; o guia sobre cortar uma imagem em uma proporção explica os cortes quadrados, e SVG para PNG dá uma prévia grande e rápida para avaliar o design.

Perguntas frequentes sobre SVG em ícone

Qual a diferença entre esta página e a de SVG para ICO?

SVG para ICO foca no arquivo .ico único para favicons e Windows. Esta página cobre todos os lugares onde um ícone é usado, incluindo o ICNS do macOS e os PNGs de tamanho fixo que Android, iOS e lojas de aplicativos pedem.

Qual formato de ícone cada sistema operacional usa?

O Windows lê ICO, o macOS lê ICNS ou catálogos de ativos criados no Xcode, e Android e iOS usam imagens PNG em tamanhos de pixel fixos.

Consigo todos os tamanhos de PNG do meu app numa só conversão?

Não. Um PNG guarda um só tamanho, então cada conversão gera uma largura. Defina Redimensionar imagem de saída para um tamanho, converta, depois mude o número e converta de novo; cada tamanho é redesenhado com nitidez a partir do vetor.

O ICNS desta página inclui os ícones Retina do Mac?

Ele contém tamanhos de 16 até 256 px. Os ícones atuais de apps do macOS também incluem entradas de 512 px e 1024 px para telas Retina, que o Xcode ou o iconutil da Apple montam a partir de PNGs; exporte esses dois como PNG aqui e adicione-os ao conjunto.

O ícone deve manter o fundo transparente?

Para ICO, ICNS e camadas do ícone de inicialização do Android, sim: a transparência deixa o sistema desenhar seu próprio fundo. O ícone da App Store do iOS é a exceção; a Apple rejeita um ícone de 1024 px com canal alfa, então dê a esse PNG um fundo sólido no SVG.

Por que meu logo cheio de detalhes vira um borrão como ícone pequeno?

Em 16 ou 32 px não há espaço para linhas finas ou textos pequenos. Engrosse os traços para que cubram pelo menos um pixel inteiro no menor tamanho e retire o logotipo escrito.