Conversor de SVG para ICO

A processar...

O SVG escala lindamente, mas os navegadores ainda querem um .ico na raiz do seu site para o favicon da aba e os favoritos antigos. Este conversor rasteriza o seu vetor em cada tamanho que você escolher, de 16 até 256 pixels, e reúne os tamanhos selecionados em um único arquivo .ico, para que o navegador escolha o mais nítido em cada contexto. Tudo é executado no seu navegador.

Como transformar um SVG em um favicon.ico

  1. 1

    Envie o seu SVG

    Escolha um SVG quadrado. Formas simples e preenchimentos chapados suportam melhor a redução para 16px do que traços finos.

  2. 2

    Escolha os tamanhos

    Selecione quais tamanhos de ícone incorporar entre 16, 24, 32, 48, 64, 128 e 256. 16/32/48 cobre a maioria dos navegadores; adicione 64/128/256 para os blocos do Windows.

  3. 3

    Converta no seu navegador

    Cada tamanho escolhido é desenhado em um canvas, exportado como PNG e reunido em um único .ico de várias resoluções. A transparência do SVG é preservada.

  4. 4

    Baixe o .ico

    Pegue o ICO de várias resoluções e coloque-o em /favicon.ico ou referencie-o a partir de <link rel="icon">.

Tamanhos de favicon que realmente importam

Tamanho Onde aparece
16x16 Abas do navegador, histórico, preenchimento automático
32x32 Abas Retina, atalhos da barra de tarefas
48x48 Atalhos de sites do Windows, alguns launchers do Android
64x64 Blocos do Windows de alta densidade (DPI alto)
128/256 Ícones de atalho da área de trabalho e manifestos de app

Projetar um SVG que reduz de forma limpa

  • Elimine os detalhes abaixo de 24px. Textos pequenos e contornos finos viram borrão a 16x16; redesenhe uma variante mais encorpada para os tamanhos menores.
  • Prefira preenchimentos chapados. Cada tamanho é rasterizado em um PNG com cores plenas, então os degradês são mantidos, mas ainda podem criar faixas a 16x16, onde há poucos pixels para mostrar a transição.
  • Centralize o glifo. O ICO não respeita as margens do SVG; garanta que a sua arte já tenha o espaçamento que você quer.
  • Deixe a viewBox quadrada. Uma viewBox de 512x512 mantém as contas limpas quando o exportador a reduz pela metade até 256, 128 e 64.
  • Incorpore tudo o que o SVG precisa. O navegador desenha o SVG em um canvas, então fontes ou imagens externas às quais o SVG faz referência podem não carregar; converta o texto em traçados e incorpore antes qualquer arte referenciada.

Vincular o ícone

Coloque-o na raiz do site e referencie tanto o ICO quanto um SVG moderno para os navegadores que o suportam:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Os navegadores escolhem o formato mais nítido que entendem, então manter os dois não custa nada.

Perguntas frequentes

Porque os navegadores solicitam automaticamente /favicon.ico antes de ler as suas tags <link>, e um 404 nesse caminho atinge os seus logs a cada carregamento de página. Servir um ICO real mantém a requisição barata e elimina esse ruído.

Pode, mas você verá favicons borrados em telas de alta densidade ou nos atalhos do Windows. Incluir pelo menos 16, 32 e 48 cobre praticamente qualquer superfície com um único arquivo.

Sim. Os quadros ICO são quadrados e cada tamanho é desenhado em um canvas quadrado, então um SVG não quadrado será esticado para preenchê-lo. Recorte ou complete a viewBox até deixá-la quadrada antes de converter.

A conversão é executada no lado do cliente, no seu navegador; nada do seu SVG sai da sua máquina.

Ferramentas relacionadas

Ferramenta disponível em outros idiomas