figbell
Suporte
figbell

Todos os artigos

Guias

Gerar um conjunto de ícones, um favicon e SVG para a web a partir de um logo

Como o Bezira gera, a partir de um logo SVG, ícones PNG de 16 a 512 pixels, um favicon.ico e SVG otimizado. A exportação é feita no dispositivo.

Por Ahmet Samet Yüzlü

2 min de leitura

Um site ou aplicativo precisa do mesmo logo em muitos tamanhos: o ícone da aba, o ícone da tela inicial, o SVG da página. O Bezira gera tudo isso em uma única janela de exportação; o processamento é feito neste dispositivo.

Preparação

  1. Abra o arquivo SVG do logo com Arquivo › Abrir… (Ctrl/⌘ O). O arquivo abre como está; IDs, definições e estilos são preservados.
  2. Os ícones são gerados como PNGs quadrados. Se o logo não for quadrado, é possível criar uma prancheta quadrada com Objeto › Adicionar prancheta; a janela oferece tamanhos prontos como Ícone de aplicativo (512×512).

Conjunto de ícones e favicon.ico

  1. Abra a janela Arquivo › Exportar (Ctrl/⌘ ⇧ E).
  2. Na seção O quê, escolha Documento inteiro, Cada prancheta separadamente ou Somente a seleção.
  3. Na seção Formatos, marque Conjunto de ícones e escolha os tamanhos desejados: 16, 24, 32, 48, 64, 128, 256 e 512.
  4. Selecione também o botão favicon.ico. O arquivo contém os tamanhos de 16, 32 e 48 pixels.
  5. Confira a lista Arquivos gerados e clique em Exportar.

No Chrome, no Edge e no Opera, Escolher pasta grava os arquivos diretamente em uma pasta. Se nenhuma pasta for escolhida ou se o navegador não puder gravar em uma pasta, vários arquivos são baixados como um único .zip.

SVG leve para a web

Na mesma janela, quando SVG está marcado e Otimizado é escolhido, atributos desnecessários, grupos vazios e casas decimais em excesso são removidos. Opções:

  • Manter nomes de camada como id: para elementos que serão referenciados com CSS ou scripts.
  • Minificar (uma linha): reduz o arquivo a uma única linha.
  • Usar currentColor nas cores (ícones): o ícone assume a cor do texto da página.
  • Precisão decimal: entre 0 e 3 casas.

A janela mostra o tamanho do SVG original; a otimização não altera a aparência. Para editar o documento de novo mais tarde, use a opção Editável: camadas, grupos e pranchetas são preservados.

Bom saber

  • Arquivos do Adobe Illustrator (.ai), EPS e PDF não abrem; o logo precisa estar em SVG.
  • Não há conversão de texto em contornos nem texto sobre um caminho.
  • Scripts, atributos de evento e links externos de um arquivo aberto são removidos por segurança; a quantidade de itens removidos é informada.

O Bezira abre na hora no navegador.