Pular para o conteúdo
SPCXTools

Gerador de Favicon

Transforme um logotipo, uma letra ou um emoji em um pacote completo de favicons com o código HTML para usá-lo.

Roda localmente — os arquivos não saem do seu dispositivo

Carregando ferramenta…

Como usar: Gerador de Favicon

  1. 1Escolha A partir de imagem e selecione seu logotipo (um PNG ou SVG quadrado funciona melhor), ou escolha A partir de texto e digite uma letra, iniciais ou um emoji.
  2. 2Ajuste o raio dos cantos, o preenchimento e as cores. As prévias mostram o ícone em tamanhos reais.
  3. 3Clique em Baixar pacote de favicons para obter um ZIP com todos os arquivos.
  4. 4Faça o upload dos arquivos para a raiz do seu site e cole o trecho HTML no <head> das suas páginas.

Crie um favicon em segundos

Um favicon é o pequeno ícone que aparece nas abas do navegador, favoritos, histórico, resultados de busca no celular e na tela inicial quando alguém salva o seu site. Ele ajuda os visitantes a encontrarem sua aba entre dezenas de outras e faz com que até mesmo um site pequeno pareça profissional. Este gerador de favicon cria todos os arquivos que você precisa a partir de uma única imagem — ou de uma letra ou emoji, se você ainda não tiver um logotipo — e fornece o HTML para adicioná-los ao seu site.

Recursos

  • A partir de uma imagem: PNG, JPG, SVG, WebP e mais.
  • A partir de texto ou emoji: iniciais ou um emoji em um fundo colorido.
  • Cantos arredondados e espaçamento para encaixar o ícone perfeitamente nas abas e telas iniciais.
  • Pré-visualização em tempo real em 16, 32, 64 e 128 pixels.
  • Pacote completo: favicon.ico em vários tamanhos, ícones PNG, Apple touch icon, ícones para Android e web manifest.
  • Tags de link HTML prontas para copiar.
  • Privado: gerado inteiramente no seu navegador.

Entenda os tamanhos de favicon

Arquivo Tamanho Onde é usado
favicon.ico 16, 32, 48 px Todos os navegadores, atalhos do Windows, fallback para versões antigas
favicon-16x16.png 16 px Abas do navegador
favicon-32x32.png 32 px Abas em telas de alta resolução (high-DPI), barra de tarefas
apple-touch-icon.png 180 px Tela inicial do iPhone e iPad
android-chrome-192x192.png 192 px Tela inicial do Android
android-chrome-512x512.png 512 px Splash screen do Android, instalação de PWA

Dicas de design

  • Simplifique. Use o símbolo do seu logo, não o logo completo com o nome da empresa.
  • Use contraste. O ícone deve se destacar tanto em temas claros quanto escuros do navegador.
  • Teste em 16 px. Se você não conseguir reconhecê-lo na menor visualização, simplifique ainda mais.
  • Preencha o quadrado. Ícones com muito espaço vazio parecem minúsculos nas abas; reduza o preenchimento.

Ferramentas relacionadas

Converta um logo vetorial para um PNG de alta resolução primeiro com o SVG para PNG, altere o tamanho de uma imagem existente com o Redimensionar Imagem, ou converta entre formatos de imagem com o Conversor de Imagem.

Perguntas frequentes

Quais arquivos estão incluídos?
favicon.ico (16, 32 e 48 px em um arquivo), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, um site.webmanifest e um snippet HTML com as tags de link correspondentes.
Qual imagem funciona melhor para um favicon?
Uma imagem simples e quadrada, com formas sólidas e poucos detalhes. Favicons costumam ser exibidos em apenas 16×16 pixels, então textos e linhas finas desaparecem. Um símbolo sem o texto da marca, ou uma única letra, funciona muito melhor do que um logotipo completo. Use uma imagem de origem com pelo menos 512 px de largura.
Onde coloco os arquivos?
Faça o upload para a pasta raiz do seu site para que fiquem disponíveis em endereços como /favicon.ico. Depois, cole o snippet HTML dentro da seção <head>. Muitos navegadores também procuram o /favicon.ico automaticamente, mesmo sem a tag.
Por que meu novo favicon não aparece?
Os navegadores armazenam favicons em cache de forma agressiva. Abra o endereço do ícone diretamente, force a atualização da página ou tente uma janela anônima. Pode levar um tempo até que os favoritos e as abas sejam atualizados.
Devo usar um fundo transparente?
A transparência fica ótima nas abas do navegador, mas o iOS preenche as áreas transparentes do Apple touch icon com preto. Se o seu ícone não fica bom tanto em fundos claros quanto escuros, desative a transparência e escolha uma cor de fundo.
É feito upload da minha imagem?
Não. Todos os ícones são gerados e empacotados no seu próprio navegador. Nada é enviado para um servidor.

Ferramentas relacionadas

SVG para PNGTransforme gráficos vetoriais SVG em imagens PNG nítidas em qualquer tamanho, mantendo a transparência.Redimensionar ImagemRedimensione fotos para tamanhos exatos em pixels ou por porcentagem — uma imagem ou várias de uma vez, sem fazer upload.Conversor de ImagensConverta fotos e gráficos entre JPG, PNG, WebP e AVIF — em lote, sem precisar fazer upload.PNG para WebPDeixe as imagens menores para o seu site convertendo arquivos PNG e JPG para WebP — direto no seu navegador.Adicionar Borda à ImagemAdicione facilmente bordas coloridas personalizáveis e cantos arredondados às suas fotos.Adicionar Texto à ImagemColoque legendas, títulos ou textos de meme em qualquer imagem e arraste exatamente para onde quiser.