Documentação do Icons Creator

Como funciona o processamento

Depois que uma imagem é selecionada, o navegador lê o arquivo e mantém a origem em memória. As configurações de tamanho, borda, fundo, estilo e animação são aplicadas antes da geração da pré-visualização.

A etapa de conversão é carregada sob demanda. Isso evita enviar todo o código de processamento para o primeiro carregamento da página e permite que a ferramenta permaneça leve quando o visitante só quer consultar um guia.

• A seleção do arquivo começa no dispositivo do visitante.
• A pré-visualização é atualizada conforme as configurações são alteradas.
• A exportação só acontece depois de uma ação explícita do usuário.
• SVG, PNG e ICO seguem fluxos de geração diferentes para preservar o formato esperado.

Fluxo recomendado para criar um ícone

Comece com uma imagem quadrada e com boa definição. Para símbolos pequenos, reduza detalhes antes de tentar compensar o resultado com filtros ou bordas.

Depois da importação, confira a prévia em um tamanho próximo do uso final. Um desenho que parece perfeito em 512 pixels pode perder a leitura quando reduzido para 16 ou 32 pixels.

• Prepare uma origem de pelo menos 512 × 512 pixels quando possível.
• Prefira contraste suficiente entre símbolo e fundo.
• Teste bordas arredondadas antes de exportar uma versão definitiva.
• Confira o resultado em uma tela pequena e em modo escuro.

Formatos disponíveis e quando usar cada um

SVG é a melhor escolha para ícones vetoriais de interface porque escala sem pixelização e pode ser integrado a CSS. PNG é adequado quando a origem é raster e a fidelidade dos pixels importa. ICO é especialmente útil para favicons que precisam carregar múltiplas resoluções em um único arquivo.

Não é necessário escolher um único formato para todo o projeto. É comum manter SVG para a interface, PNG para imagens raster e ICO mais PNG para favicons.

• Interface e componentes: SVG.
• Imagem raster com transparência: PNG.
• Favicon com múltiplas resoluções: ICO acompanhado de PNG.

Como publicar um favicon

Para um site tradicional, publique pelo menos um favicon.ico e versões PNG. Navegadores modernos também aceitam SVG, mas o ICO continua sendo um fallback útil para ambientes variados.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Como integrar o resultado em frameworks

O arquivo exportado pode entrar em um projeto Vue, React, Angular ou Svelte como asset estático. Para bibliotecas maiores, mantenha nomes previsíveis e importe somente os ícones realmente usados por cada tela.

src/assets/icons/
├── search.svg
├── settings.svg
└── user.svg

• Vue: importe o asset no componente ou use um caminho público para arquivos estáticos.
• React: importe o SVG como asset conforme o bundler do projeto.
• Angular: mantenha assets públicos no diretório configurado pelo projeto.
• Svelte: use imports estáticos para manter o caminho resolvido pelo bundler.

Desempenho e acessibilidade

Ícones decorativos não precisam competir com o conteúdo principal. Quando um ícone comunica uma ação sozinho, forneça um nome acessível no controle que o contém. Quando for puramente decorativo, evite criar uma segunda leitura desnecessária para tecnologias assistivas.

No carregamento da aplicação, recursos pesados como processamento de imagem e exportação podem ser adiados até o momento em que são necessários. Para assets estáticos, dimensões previsíveis e cache coerente ajudam a evitar mudanças de layout.

Checklist antes de publicar

Use esta sequência para validar um ícone antes de colocá-lo em produção.

• O símbolo continua reconhecível no menor tamanho utilizado.
• O fundo e a transparência funcionam no tema claro e escuro.
• O formato escolhido corresponde ao uso final.
• O arquivo abre corretamente e retorna o MIME type esperado.
• O nome do arquivo é estável e não contém caracteres problemáticos.
• A ação que usa o ícone possui nome acessível quando necessário.