Gerador de Favicon
Uma imagem entra, o pacote completo de favicons sai: todos os tamanhos de PNG, um .ico genuíno e o HTML para conectar tudo.
🔒 Seus arquivos nunca saem do seu dispositivo
Gere todos os favicons de que o seu site precisa a partir de uma única imagem. Sites modernos não usam um único arquivo de ícone; eles precisam de uma pilha deles: 16 e 32 px para as abas do navegador, 48 px para contextos legados, 180 px para a tela de início do iPhone, e 192 mais 512 px para Android e instalações de PWA. Este gerador de favicon produz todos de uma vez, além de um arquivo .ico real com múltiplas resoluções e o trecho HTML que amarra o conjunto inteiro.
Tudo é gerado localmente, no navegador. Seu logotipo nunca é enviado, o que importa quando o site que você está construindo ainda não é público.
Comece de uma imagem quadrada, idealmente com 512 px ou mais, e cada tamanho é reduzido de forma limpa a partir dela. Marcas simples e fortes sobrevivem ao encolhimento até 16 px; detalhes finos e textos delgados viram mingau no tamanho de aba, então favicons feitos de um logotipo simplificado sempre ficam mais nítidos.
Como gerar um favicon
- Solte uma imagem quadrada, de 512x512 ou maior para melhores resultados.
- Veja como o ícone fica nos tamanhos pequenos de aba.
- Clique em Gerar para criar todos os tamanhos de PNG e o arquivo .ico.
- Baixe o pacote de favicons.
- Copie o trecho HTML fornecido para a seção head do seu site e suba os arquivos.
O que vem no pacote e onde cada arquivo é usado
Você recebe PNGs de 16, 32, 48, 180, 192 e 512 pixels, além do favicon.ico. Os arquivos de 16 e 32 px cobrem abas de navegador e favoritos; o de 180 px é o apple-touch-icon exibido quando alguém adiciona seu site à tela de início de um iPhone; os de 192 e 512 px servem o Android e o manifesto de PWA. O .ico agrupa várias resoluções em um único arquivo e continua sendo o formato que alguns navegadores e sistemas antigos solicitam por padrão em /favicon.ico.
O trecho HTML gerado declara cada ícone com os atributos rel e sizes corretos. Cole-o no seu elemento head, coloque os arquivos nos caminhos que ele referencia, e cada plataforma escolhe automaticamente o tamanho que quer.
Por que um único arquivo de favicon já não basta
O mundo antigo era um único favicon.ico na raiz do seu site. Hoje uma aba de navegador quer um ícone de 16 ou 32 px, um atalho na tela de início do iPhone quer um apple-touch-icon de 180 px, e um web app instalável (PWA) no Android quer PNGs de 192 e 512 px declarados no seu manifesto. Envie só um tamanho e alguns desses casos caem num padrão em branco ou borrado.
É por isso que este gerador entrega um conjunto completo em vez de um único arquivo. Cada plataforma busca o tamanho de que precisa, então sua marca fica nítida numa aba, definida numa tela de início e correta quando alguém instala o site como um app — em vez de uma imagem só sendo esticada para cobrir funções para as quais nunca foi dimensionada.
Como o conjunto inteiro é montado no seu dispositivo
Partindo da sua imagem de origem, a ferramenta a desenha em um canvas em cada dimensão necessária e exporta um PNG para cada tamanho usando a Canvas API. Para o .ico, ela empacota várias dessas resoluções em um único contêiner ICO genuíno — o formato real de múltiplas imagens, não um PNG com a extensão trocada.
Essa distinção do .ico importa porque alguns navegadores e sistemas antigos solicitam /favicon.ico por convenção e inspecionam o formato real do arquivo; um falso é rejeitado. Todo o redimensionamento e a codificação do ICO rodam localmente no seu navegador, então o pacote completo é montado sem que nada seja enviado.
Sua identidade visual nunca é enviada
Você costuma gerar favicons cedo, enquanto o site ainda está em desenvolvimento e o logotipo pode ser confidencial ou não lançado. Enviar essa marca para um serviço de favicon online significa entregar sua identidade visual a terceiros antes do lançamento.
Aqui a imagem é lida na página e cada arquivo é produzido na memória do seu navegador, então o logotipo permanece na sua máquina. Baixe o pacote, coloque-o no seu projeto, e nenhuma cópia jamais existiu em outro lugar além do seu próprio computador.
Desenhando uma marca que sobrevive a 16 pixels
Um favicon é muitas vezes exibido a 16 px — mal maior do que um único caractere. Logotipos detalhados, traços finos e wordmarks inteiros viram mingau nesse tamanho, e é por isso que a maioria das marcas usa um símbolo simplificado, um monograma ou uma única letra em negrito como favicon, em vez do logotipo completo.
Comece de uma imagem quadrada de pelo menos 512 px para que cada tamanho seja reduzido a partir de uma fonte limpa, prefira alto contraste e formas robustas, e use a pré-visualização em tamanho pequeno para julgar o resultado em 16 px antes de publicar. Um fundo transparente geralmente fica melhor numa aba de navegador, deixando a marca assentar de forma limpa contra temas claros ou escuros.
Conectando tudo ao seu site corretamente
Gerar os arquivos é só metade do trabalho — eles precisam ser declarados. A ferramenta lhe dá um trecho HTML com as tags link certas: atributos rel e sizes para os PNGs, o link apple-touch-icon para iOS e a referência ao favicon.ico. Cole-o no head das suas páginas e coloque os arquivos nos caminhos que ele referencia.
Mantenha o favicon.ico na raiz do site, já que os navegadores solicitam exatamente esse caminho por convenção, mesmo sem uma tag link. Um motivo comum de um favicon novo 'não aparecer' é simplesmente o cache agressivo do navegador — faça um hard-refresh ou verifique numa janela privada antes de presumir que algo está errado, pois os ícones de aba podem ficar teimosamente em cache.
Quem recorre a um gerador de favicon
Qualquer pessoa lançando ou remarcando um site — desenvolvedores, designers, donos de pequenos negócios, gente publicando um projeto paralelo ou uma landing page. No momento em que você quer o seu próprio ícone na aba do navegador em vez do globo padrão, precisa pelo menos dos tamanhos de aba; no momento em que quer que ele fique bom ao ser salvo num celular, precisa também dos maiores.
Também é útil ao auditar um site existente que só chegou a publicar um único ícone de 16 px, ou que não tem o apple-touch-icon, e agora parece quebrado nas telas de início dos celulares. Regenere o conjunto completo a partir do logotipo atual, atualize o trecho no head, e todas as plataformas ficam cobertas de novo.
Perguntas frequentes
Este gerador de favicon é grátis?
Sim, grátis e sem cadastro. Gere conjuntos de favicon para quantos projetos quiser.
Meu logotipo é enviado para algum lugar?
Não. Todo o redimensionamento e a codificação do .ico acontecem no navegador, então uma identidade visual ainda não lançada fica na sua máquina.
Eu recebo mesmo um arquivo .ico de verdade?
Sim, um .ico genuíno com múltiplas resoluções, e não um PNG com a extensão renomeada. Essa distinção importa porque alguns programas inspecionam o formato do arquivo e rejeitam .ico falsos.
De que imagem devo partir?
Um PNG quadrado de pelo menos 512x512, com um design simples e de alto contraste. Fundos transparentes são aceitos e geralmente ficam melhores nas abas do navegador.
Por que meu logotipo fica ruim em 16 pixels?
Dezesseis pixels é minúsculo; wordmarks e logotipos detalhados simplesmente não sobrevivem. A maioria das marcas usa um símbolo simplificado ou uma única letra como favicon. Use a pré-visualização em tamanho pequeno para julgar antes de publicar.
Esses tamanhos cobrem a tela de início do iPhone e PWAs no Android?
Sim. O ícone de 180 px é exatamente o que o iOS usa em Adicionar à Tela de Início, e os PNGs de 192 e 512 px são os dois tamanhos que o Android e os manifestos de web apps esperam.