Gerador de favicon

Crie de uma vez o favicon.ico, PNGs de cada tamanho e ícones para iPhone e Android a partir de um texto, um emoji ou do seu logo.

1. Digite um texto ou escolha uma imagem

Digite os caracteres (emojis também) do ícone ou escolha uma imagem, como o seu logo.

Criar a partir de

Até 3 caracteres. O ícone aparece bem pequeno, então 1 ou 2 caracteres ficam melhor.

Fonte

2. Escolha forma e cor

Escolha a forma e a cor do fundo e o tamanho do conteúdo. A prévia mostra na hora.

Forma

Cor de fundo

#f97316

Só o ícone da tela inicial do iPhone (apple-touch-icon) é preenchido com a cor de fundo escolhida acima, porque ali as áreas transparentes ficam pretas.

Cor do texto

#ffffff
100%

Cores no modo escuro

Só o favicon.svg muda. No automático, o brilho só é invertido quando uma cor ficaria difícil de ver numa tela escura.

3. Confira e salve

Confira como fica na aba do navegador e na tela inicial e salve tudo em um único ZIP.

Digite um texto para ver a prévia aqui

Claro
Escuro
Meu site

Na aba do navegador (claro e escuro)

Meu site
Meu site

Vai para o site.webmanifest como o nome mostrado ao adicionar o site à tela inicial.

Adiciona 64, 128 e 256 px, usados quando o ícone aparece grande, como em atalhos da área de trabalho do Windows. O arquivo fica maior.

HTML para o seu site

Coloque os arquivos do ZIP na raiz (/) do seu site e cole este HTML dentro de <head>.

Ver HTML
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">
<link rel="manifest" href="/site.webmanifest">
Arquivos do ZIP
  • favicon.ico (16 / 32 / 48)
  • favicon.svg
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest
  • favicon-html.txt

Tudo acontece neste dispositivo. Suas imagens nunca são enviadas.

Foi útil? Adoraríamos que você compartilhasse

Algo não funcionou ou tem uma ideia para melhorar?

Informar um problemaSugerir uma melhoria

Como usar

  1. 1. Digite o texto

    Com “Texto” selecionado, toque no campo “Texto do ícone” e digite de 1 a 3 caracteres. Emojis também funcionam. O estilo das letras você escolhe logo abaixo, em “Fonte”.

  2. 2. Escolha forma e cor

    Toque em “Escolher forma e cor em tela cheia” para abrir o editor. Na barra de baixo, toque em “Círculo” na aba “Forma” e depois em uma amostra de cor de fundo na aba “Cor”. A prévia no meio mostra na hora como fica em telas claras e escuras.

  3. 3. Criar a partir de uma imagem

    Para usar uma imagem, como um logo, toque em “Imagem” no alto e escolha a imagem em “Escolher arquivos”. O editor em tela cheia se abre e a imagem inteira cabe no ícone. Para ela ir até as bordas, toque em “Preencher” em “Ajuste”, na barra de baixo.

  4. 4. Salvar tudo de uma vez

    Na seção “Confira e salve”, toque em “Baixar tudo em ZIP” para salvar todos os arquivos em um único ZIP. O HTML para o seu site é copiado logo abaixo, em “Copiar HTML”.

Ideal para

  • Um ícone na hora para o seu site

    Crie em segundos, a partir de uma letra ou de um emoji, o ícone que aparece na aba do seu blog, site pessoal ou aplicativo web. Sem programa de design.

    Quem cria o próprio site

  • Todos os tamanhos de uma vez

    Crie de uma só vez o favicon.ico, PNGs de 16/32 px e ícones para iPhone e Android, tudo reunido em um ZIP. Nada de exportar cada tamanho à mão.

    Web designers e desenvolvedores

  • A partir do logo da loja ou da empresa

    É só escolher o logo e ele fica no tamanho certo para abas e tela inicial. Fundos transparentes são mantidos.

    Lojas e pequenas empresas

  • Para páginas de prática em HTML

    O HTML pronto para colar mostra qual arquivo vai onde. Útil em páginas feitas em aula ou para praticar.

    Quem aprende programação e professores

Bom saber antes de usar

  • Textos finos ou fotos ficam ilegíveis em 16 px. Um símbolo bem definido ou 1 ou 2 caracteres funcionam melhor.
  • Não cria imagens de bloco do Windows. Os navegadores e celulares atuais exibem sem problema os arquivos desta ferramenta.
  • Para cortar antes a margem em volta de um logo, use “Recortar imagens”.

Arquivos e tamanhos de que um favicon precisa

O favicon é o ícone do site que aparece nas abas do navegador, nos favoritos, nos resultados de busca e na tela inicial do celular. Cada lugar usa um tamanho diferente, por isso normalmente se preparam vários arquivos a partir de uma mesma imagem. Esta ferramenta cria tudo o que os navegadores e celulares atuais precisam, junto com o HTML para colar no seu site.

O favicon.ico é um formato que guarda três tamanhos (16, 32 e 48 px) em um só arquivo e também aparece em navegadores antigos e atalhos do Windows. O ícone da tela inicial do iPhone (apple-touch-icon) não pode ser transparente, e o próprio iPhone arredonda os cantos, por isso esta ferramenta o cria quadrado e com o fundo preenchido. O favicon.svg pode mudar de cor conforme o modo escuro, e o Chrome, o Firefox e o Edge o usam nas abas.

Arquivos criados e onde são usados
TamanhoOnde é usado
favicon.ico16, 32, 48 px (64, 128, 256 px opcionais)Abas, favoritos, Windows
favicon.svg—Abas (as cores mudam no modo escuro)
favicon-16x16.png / favicon-32x32.png16, 32 pxAbas do navegador
apple-touch-icon.png180 pxTela inicial do iPhone e do iPad
android-chrome-192x192.png / 512x512.png192, 512 pxTela inicial do Android e apps web instalados
site.webmanifest—Informa ao Android o ícone, o nome e as cores

Perguntas frequentes

As dúvidas mais comuns sobre como criar e instalar um favicon.

Minhas imagens são enviadas para algum lugar?

Não. Do carregamento da imagem ao desenho dos ícones e à montagem do ZIP, tudo acontece no navegador deste aparelho. As imagens escolhidas e o texto digitado não são enviados para lugar nenhum.

Que tipo de imagem funciona melhor?

Imagens quadradas e com formas bem definidas. Em 16 px o ícone é minúsculo, então textos finos e fotos ficam ilegíveis. Use só o símbolo do seu logo ou crie um ícone de 1 ou 2 caracteres em “Texto”. Para imagens horizontais, escolha “Imagem inteira” ou “Preencher” em “Ajuste”.

Dá para criar um favicon com emoji?

Dá. Digite um emoji em “Texto do ícone” e ele vira um ícone. O desenho do emoji depende do aparelho usado (iPhone, Android, Windows etc.).

Onde coloco os arquivos criados?

Descompacte o ZIP e coloque todos os arquivos na raiz do seu site (onde https://example.com/favicon.ico abriria). Depois copie o “HTML para o seu site” e cole dentro de <head> em cada página.

Só o favicon.ico basta?

Para a aba do navegador, o favicon.ico sozinho basta. Se você também quer um ícone nítido quando o site for adicionado à tela inicial do celular, envie todos os arquivos do ZIP e cole o HTML.

O fundo pode ser transparente?

Pode. Ative “Fundo transparente” e o fundo e tudo o que fica fora da forma ficam transparentes. A exceção é o ícone da tela inicial do iPhone (apple-touch-icon.png): ali as áreas transparentes aparecem pretas, então ele é preenchido com a cor escolhida em “Cor de fundo”.

Funciona com WordPress?

Funciona. No WordPress, vá em “Aparência” → “Personalizar” → “Identidade do site” e, em “Ícone do site”, escolha o android-chrome-512x512.png do ZIP (o WordPress exige uma imagem de pelo menos 512 px).

Troquei o favicon, mas ainda aparece o antigo

Os navegadores podem guardar o favicon em cache por bastante tempo. Se recarregar a página não resolver, limpe o cache do navegador ou confira de novo depois de um tempo.

Dá para criar favicon SVG?

Dá. O ZIP traz o favicon.svg. No modo escuro, ele passa para as cores de “Cores no modo escuro” (no automático, o brilho só é invertido em cores pouco visíveis). O texto entra como imagem na fonte escolhida, e o SVG só pinta a cor dele.

É grátis?

É grátis. Sem cadastro e sem anúncios. Não há limite de ícones.

Mais ferramentas