Gerador de favicon: como criar o ícone do site a partir de imagem, emoji ou iniciais

Para criar um favicon completo, use o gerador de favicon do site: envie uma imagem, escolha um emoji ou digite as iniciais, e baixe o pacote. Ele gera o SVG, o favicon.ico com 16, 32 e 48 px, o ícone de 180 px do iPhone, os PNGs de 192 e 512 px do Android e o manifesto que os declara. Tudo roda no navegador, sem cadastro.

Quando usar cada opção

• Iniciais: de 1 a 3 letras. Duas letras leem melhor na aba do que três.

• Emoji: escolha qualquer emoji do Twemoji. Ele vai em vetor para o SVG e em imagem de pontos para o ICO e os PNGs.

• Imagem: uma foto ou um PNG vira o ICO e os PNGs, cortada ou inteira. Se o seu logotipo estiver em SVG, envie o SVG, porque ele continua vetor.

Passo a passo

1. Abra o gerador de favicon do site.

2. Escolha a origem: iniciais, emoji ou imagem.

3. Ajuste a margem e o fundo. A prévia mostra o tamanho real da aba, em 16 px, e avisa quando um traço fica fino demais ou quando as cores somem no fundo.

4. Baixe o pacote. Copie os arquivos para a raiz do site, no mesmo nível da página inicial.

5. Declare os ícones no head da página. A própria ferramenta mostra o código pronto para o seu caso.

6. Confira numa aba anônima.

Qual arquivo usar

O SVG é o principal: fica nítido em qualquer tamanho e pode mudar de cor no modo escuro, sem JavaScript no seu site. O ICO fica para quem não lê SVG, como navegadores antigos e serviços que pedem /favicon.ico direto, por exemplo leitores de RSS e pré-visualizações de links. O apple-touch-icon de 180 px é o que o iPhone usa na tela de início, e os PNGs de 192 e 512 px servem para instalar o site como aplicativo no Android.

Erros comuns

• Imagem pequena. Um logotipo de 64 px fica borrado em telas de alta densidade. Comece pelo maior arquivo que você tiver.

• Texto fino no logotipo. Letras finas somem no tamanho de 16 px. Nesse caso, use só o símbolo ou as iniciais.

• Cache do navegador. O navegador guarda o ícone por dias. Para testar uma troca, use uma aba anônima.

Fontes fora do arquivo

As letras do favicon são desenhadas dentro do arquivo, em contorno. Assim o ícone fica igual em qualquer máquina, sem depender da fonte instalada no computador do visitante.

Resumo

O gerador cria o pacote completo em um passo. Para um site pequeno, o SVG e o favicon.ico, com o apple-touch-icon, cobrem a maior parte dos casos.

Fonte

Página do gerador de favicon do site, consultada em 02/11/2026.