Gerador de Favicon Real Gratuito Online

Gerador de favicon gratuito online. Envie uma imagem e baixe um kit completo de ícones — favicon.ico, ícones PNG, ícone de toque da Apple e web manifest — pronto para abas do navegador, favoritos e telas iniciais do Android e iOS.

Uma imagem quadrada de 512 x 512 px ou maior funciona melhor.

0%
De ponta a pontaEspaço para respirar
0%
QuadradoCírculo
Configurações do app e de instalação

Caminho relativo à raiz, como / ou /icons/.

#FFFFFF

Escolha uma imagem ou experimente um ícone de texto para começar.

512 PX
ABA DO NAVEGADOR
Meu site
your-website.com
TELA INICIAL
Meu site
PIXEL PERFEITO?

Compare tamanhos pequenos.

16px
32px
48px
64px

Baixe seu kit de ícones

7 arquivos de ícones, um web manifest e instruções de instalação.

Dentro do seu download

9 arquivos
favicon.icoClassic browser support
16, 32, 48 px
favicon-16x16.pngBrowser tabs
16 x 16
favicon-32x32.pngHigh-density tabs
32 x 32
favicon-48x48.pngSearch & shortcuts
48 x 48
apple-touch-icon.pngiPhone & iPad
180 x 180
android-chrome-192x192.pngAndroid home screen
192 x 192
android-chrome-512x512.pngLarge app icon
512 x 512
site.webmanifestWeb app metadata
JSON
INSTALL.txtInstallation guide
TXT

Código HTML

HTML

Envie seus arquivos e adicione isto dentro do <head> do seu site. Os caminhos são atualizados conforme suas configurações.

index.html
DO UPLOAD PARA TODOS OS LUGARES

Como funciona

Pule o redimensionamento manual e os chutes de formato.
Vá da sua ideia a um site reconhecível em três passos.

01 /

Traga sua identidade.

Envie seu logotipo ou crie um ícone a partir de uma letra. Formas simples, contraste forte e uma tela quadrada são o melhor ponto de partida.

02 /

Ajuste os detalhes.

Escolha um fundo, ajuste o espaçamento e confira as prévias ao vivo. Garanta que sua marca seja reconhecível mesmo em uma pequena aba do navegador.

03 /

Dê um lar a cada aba.

Baixe seu kit completo, envie os arquivos e cole o HTML. Sua marca está pronta para abas do navegador, favoritos e telas iniciais.

FEITO PARA OS DETALHES

Funciona em navegadores e dispositivos

Um favicon costuma ser a menor parte da sua marca. Mesmo assim, deve parecer intencional. Gere os tamanhos certos para os lugares onde as pessoas encontram, salvam e revisitam seu site.

Crie seu favicon
Navegadores do dia a diaICO + PNG para abas, favoritos e atalhos16-48 PX
Dispositivos AppleUm ícone de tela inicial dedicado e opaco180 PX
Aplicativos Android e webÍcones de alta resolução com um web manifest192 / 512
O GUIA DE DOIS MINUTOS

Instalação

Sem configuração complicada.
Apenas alguns arquivos no lugar certo.

Ir para o seu HTML
1

Baixe e extraia seu kit de ícones

Escolha a fonte e ajuste a prévia, depois selecione Baixar kit de favicon. Extraia o ZIP para obter todos os sete arquivos de ícones, site.webmanifest e um guia de instalação em texto simples.

2

Coloque os arquivos onde seu site possa servi-los

Envie os ícones e o manifest para a raiz pública do seu site. Se preferir uma subpasta, defina o Diretório de ícones nas configurações do app antes de baixar. Por exemplo, /icons/ significa que seus arquivos devem estar disponíveis em your-site.com/icons/.

3

Adicione o HTML e verifique seu trabalho

Copie o código gerado para o <head> de cada página ou do seu layout compartilhado. Remova tags antigas de ícones conflitantes. Abra os URLs dos ícones diretamente para conferir se carregam e depois visite o site em uma janela privada para evitar ícones antigos em cache.

UM ÍCONE MELHOR COMEÇA AQUI

Dicas de design de favicon

Menos detalhe. Mais personalidade.

Linhas finas e palavras longas desaparecem em tamanhos pequenos. Use um símbolo distinto, um monograma ou uma única letra em vez de espremer todo o seu logotipo em um quadrado.

Dê um pouco de espaço.

Use espaçamento para manter sua marca longe das bordas. Pré-visualize uma aba do navegador e uma tela inicial: a mesma imagem pode parecer muito diferente em cada escala.

Faça o contraste valer.

Ícones transparentes podem sumir contra um tema de navegador claro ou escuro. Um fundo sólido dá um contraste previsível. Verifique os dois temas antes de publicar.

Comece com uma fonte nítida.

Uma imagem grande e limpa dá ao gerador mais detalhes para trabalhar. Ampliar uma imagem minúscula não recupera informações ausentes. Use um SVG ou uma fonte de 512 px quando possível.

OS DETALHES MAIS FINOS

Perguntas frequentes

Tudo o mais que você pode querer saber sobre seu novo favicon.

O que é um favicon e por que preciso de um?

Um favicon é o pequeno ícone que representa seu site em abas do navegador, favoritos, histórico e às vezes nos resultados de busca. Um ícone claro e consistente ajuda os visitantes a reconhecer seu site entre muitas abas abertas. Ícones da tela inicial têm propósito semelhante quando alguém salva seu site no celular.

Qual imagem devo enviar?

Comece com um PNG, SVG, JPEG ou WebP quadrado, idealmente com pelo menos 512 x 512 pixels. PNGs transparentes e SVGs autossuficientes funcionam especialmente bem. Mantenha o design simples: um símbolo ou inicial geralmente é mais legível do que um wordmark completo em 16 pixels. Arquivos de até 10 MB e imagens de até 4096 pixels por lado são suportados.

Esta ferramenta é gratuita? Minhas imagens são enviadas?

O gerador é gratuito, sem conta nem marca dágua. Decodificação de imagens, prévias e criação de ZIP acontecem no seu navegador. Sua imagem-fonte não é enviada a um servidor. Seu navegador pode baixar os ativos do site na primeira visita, mas o gerador não envia sua imagem para lugar nenhum.

Por que os ícones da Apple e do Android têm um fundo?

Ícones da tela inicial ficam melhores em uma tela quadrada sólida. Esta ferramenta achata essas exportações sobre a cor de fundo escolhida, mesmo com ícones transparentes do navegador ativados. O dispositivo aplica seu próprio tratamento de cantos. As exportações para Android usam o propósito padrão "any"; não são ícones maskable certificados.

Por que meu favicon antigo ainda aparece?

Navegadores armazenam favicons em cache agressivamente. Primeiro verifique se cada URL gerado abre diretamente e se sua página tem apenas um conjunto intencional de links de ícones. Depois tente uma janela privada ou limpe o cache do site. Para uma atualização confiável, use uma nova pasta como /icons-v2/ e atualize os links HTML. Mecanismos de busca podem levar mais tempo para recapturar o ícone.

O web manifest torna meu site um PWA?

Não. O manifest fornece um nome de app, cores e ícones, mas não adiciona funcionalidade offline nem um service worker. A capacidade de instalação depende do seu navegador e da configuração do site, incluindo HTTPS. O manifest gerado usa / como URL inicial; edite-o se seu app estiver em uma subpasta.

Posso usar esses arquivos com WordPress, Shopify ou Astro?

Sim. Os arquivos são imagens PNG e ICO padrão. No Astro, coloque-os em public/ e adicione as tags geradas ao cabeçalho do seu layout compartilhado. Para WordPress ou Shopify, use a configuração de ícone do site da plataforma quando possível, ou envie os arquivos e ajuste o cabeçalho do seu tema. Plataformas hospedadas podem controlar nomes de arquivos e URLs, então adapte os caminhos para corresponder.