Este gerador de favicon cria o conjunto completo de ícones de um site a partir de uma ou duas letras, um emoji ou o seu logotipo. Você recebe favicon.ico, favicon.svg, tamanhos PNG, o ícone de toque da Apple, ícones Android e maskable, um manifesto web e o HTML para colar no head. Roda no navegador e o logotipo não é enviado.
Como usar
- Digite uma ou duas letras ou um emoji, ou mude para Imagem e solte seu logo (SVG fica melhor).
- Escolha fundo, cor do texto, formato e margem. As prévias se atualizam enquanto você ajusta.
- Baixe tudo em um ZIP ou toque em um arquivo para baixá-lo sozinho.
- Copie o trecho HTML para o <head> da página e envie os arquivos para a pasta raiz do site.
- O favicon.ico traz ícones de 16, 32 e 48 px em PNG para qualquer navegador; o favicon.svg fica nítido em qualquer tamanho.
- O apple-touch-icon.png é quadrado e opaco porque o iOS arredonda os cantos sozinho.
- O ícone maskable mantém o logo na área segura para o Android recortar em qualquer formato.
- Tudo é gerado no navegador; sua imagem nunca é enviada.
O que um conjunto de favicon atual inclui
O favicon.ico guarda imagens de 16, 32 e 48 px e ainda é procurado por muitos navegadores e ferramentas na raiz do site. O favicon.svg fica nítido em qualquer tamanho e é usado pelos navegadores atuais. O apple-touch-icon.png (180 × 180) aparece quando alguém adiciona o site à tela inicial do iPhone. android-chrome-192x192 e 512x512, mais um ícone maskable de 512 px, entram no site.webmanifest para Android e apps web instaláveis.
O trecho HTML liga todos eles: basta colar no head e enviar os arquivos para a pasta raiz.
Um ícone legível em 16 px
Na aba do navegador, o favicon aparece com apenas 16 × 16 pixels. Uma ou duas letras grossas, um símbolo simples ou só o símbolo da marca funcionam muito melhor que um logotipo completo com texto. Bom contraste entre fundo e desenho ajuda nos temas claro e escuro. Confira as prévias da aba nos temas claro e escuro antes de baixar.
Ícones da Apple e maskable
O iOS arredonda os cantos sozinho e não lida bem com transparência, por isso o ícone de toque da Apple é quadrado e opaco. O Android pode recortar ícones maskable em círculos e outras formas; o gerador mantém o desenho dentro da zona segura para nada importante ser cortado.
Perguntas frequentes
Qual o tamanho de um favicon?
O ideal é ter vários: 16, 32 e 48 px dentro do favicon.ico, um SVG para qualquer tamanho, 180 × 180 para Apple e 192 e 512 px para Android. Este gerador cria todos de uma vez.
Ainda preciso do favicon.ico?
Sim. Alguns navegadores, leitores de feed e outras ferramentas ainda procuram /favicon.ico na raiz do site, então mantê-lo evita ícones faltando e erros 404.
Como coloco o favicon no meu site?
Envie os arquivos do ZIP para a pasta raiz do site e cole o trecho HTML no head de todas as páginas. Depois recarregue limpando o cache para ver o ícone novo.
Por que meu novo favicon não aparece?
Navegadores guardam favicons em cache por muito tempo. Abra a URL do ícone, force a recarga ou teste numa janela anônima. Os resultados de busca podem demorar para mostrar o ícone novo.
Posso usar um emoji como favicon?
Sim. Digite um emoji, escolha fundo e formato e o ícone é desenhado a partir dele. Emojis variam um pouco entre sistemas, e os arquivos guardam a aparência do aparelho em que foram feitos.
Meu logotipo é enviado?
Não. Todos os ícones são desenhados e compactados no ZIP dentro do navegador, então o logotipo não sai do seu aparelho.