Fundo
×
×
iOS
Android
512 px

Transforme um emoji como 🚀 em favicon em segundos: escolha a cor de fundo e um formato redondo, arredondado ou quadrado, e baixe ícones ICO, PNG, SVG e de toque da Apple. Prático para projetos pessoais, protótipos e ferramentas internas.

Como usar

  1. Digite uma ou duas letras ou um emoji, ou mude para Imagem e solte seu logo (SVG fica melhor).
  2. Escolha fundo, cor do texto, formato e margem. As prévias se atualizam enquanto você ajusta.
  3. Baixe tudo em um ZIP ou toque em um arquivo para baixá-lo sozinho.
  4. 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.

Usado junto com

Como usar

Passos

  1. Digite uma ou duas letras ou um emoji, ou mude para Imagem e solte seu logo (SVG fica melhor).
  2. Escolha fundo, cor do texto, formato e margem. As prévias se atualizam enquanto você ajusta.
  3. Baixe tudo em um ZIP ou toque em um arquivo para baixá-lo sozinho.
  4. Copie o trecho HTML para o <head> da página e envie os arquivos para a pasta raiz do site.

Atalhos

Ctrl + VColar uma imagem

Bom saber

Funciona no seu navegador. Arquivos e textos nunca saem do seu dispositivo.