Gerador de Favicon

1. Escolha o modo: enviar uma imagem ou desenhar a partir de texto.
2. No modo imagem, ajuste a cor de fundo e o espaçamento interno. No modo texto, escolha o texto, a cor da letra e a do fundo.
3. Baixe o pacote com todos os tamanhos gerados.

• 16 e 32 pixels — o ícone da aba e da barra de endereços no navegador.
• 48 pixels — atalhos e listas de sites em alguns sistemas.
• 180 pixels — o ícone usado quando alguém adiciona o site à tela inicial no iOS.
• 192 e 512 pixels — os tamanhos que o manifesto de aplicativo web usa em Android e em instalação como aplicativo.

Um logotipo completo reduzido a 16 pixels vira uma mancha. Nesse tamanho não há espaço para texto legível nem para detalhe fino.

A saída é simplificar: use uma letra, um símbolo isolado ou a forma mais reconhecível da marca. Muitas marcas conhecidas usam apenas a inicial no favicon.

Contraste com o fundo importa mais do que fidelidade à identidade visual. O ícone precisa se destacar tanto em aba clara quanto escura, e um ícone quase branco desaparece no tema claro do navegador.

É por isso que o modo texto existe: para um projeto sem identidade visual definida, uma inicial bem contrastada funciona melhor do que um logotipo ilegível.

O navegador procura automaticamente por um arquivo chamado favicon.ico na raiz, mas depender disso limita você a um único tamanho.

A forma correta é declarar cada arquivo com uma tag de link no cabeçalho, indicando tamanho e tipo, e referenciar os ícones de 192 e 512 no manifesto do aplicativo web.

Navegadores fazem cache agressivo de favicon. Depois de trocar, pode ser necessário forçar recarga ou limpar o cache para ver a mudança.

Toda a geração acontece no seu navegador: a imagem enviada não sai do seu computador.