É o pequeno ícone que identifica seu site nas abas, nos favoritos e em outras áreas do navegador. Um símbolo simples da sua marca ajuda as pessoas a reconhecer a página mesmo com várias abas abertas.

Qual é o tamanho certo de um favicon?

Para o arquivo ICO, este gerador inclui 16 × 16, 32 × 32 e 48 × 48 px. Ele também gera 180 × 180 px para Apple Touch Icon e 192 × 192 e 512 × 512 px para Android e PWA. Cada arquivo atende a um uso.

Como converter PNG ou JPG para favicon.ico?

Escolha a imagem e clique em Gerar favicons. Você recebe um ICO com três resoluções e arquivos PNG separados. Para um bom resultado, use uma imagem quadrada de pelo menos 512 × 512 px. A conversão acontece no navegador.

Qual é a diferença entre ICO e PNG?

ICO pode reunir vários tamanhos no mesmo arquivo. Cada PNG tem uma única resolução. Você pode oferecer favicon.ico como opção de compatibilidade e declarar os PNGs no HTML para outros usos.

Por que meu favicon não aparece ou continua antigo?

Confira se o arquivo existe no caminho indicado pelo HTML e se o navegador não recebe um erro 404. Depois teste em uma janela anônima ou limpe o cache. Plugins de cache e CDNs também podem manter a versão antiga.

Como colocar o favicon em um site HTML?

Copie os arquivos para a pasta pública do site e use as tags fornecidas na aba Código HTML. Os caminhos precisam corresponder à localização dos arquivos. Inclua a referência a favicon.ico e, se necessário, aos PNGs e ao Apple Touch Icon.

Como usar os arquivos no Next.js?

O Next.js tem convenções próprias para ícones no App Router. Consulte o guia de Next.js disponível no site para escolher o local dos arquivos e a configuração adequada à estrutura do seu projeto.

Como mudar o favicon no WordPress?

Procure a opção Ícone do site nas configurações do WordPress ou no personalizador do tema, conforme sua versão. Use uma imagem quadrada de pelo menos 512 × 512 px. Depois limpe o cache do site e do navegador, se a mudança não aparecer.

Posso usar um SVG como imagem de origem?

Sim. Este gerador aceita SVG e o transforma nos tamanhos ICO e PNG do pacote. Se quiser entregar um arquivo SVG como favicon, use a ferramenta específica de favicon SVG e mantenha alternativas para os navegadores e usos que precisarem delas.

Estes arquivos são suficientes para um PWA?

Os PNGs de 192 e 512 px ajudam a compor os ícones do manifest. Se você precisa de versões maskable, ajustes de área segura, telas de abertura e configuração do manifest, use o Gerador de ícones para PWA.

Para que serve o apple-touch-icon?

É o ícone usado quando alguém adiciona seu site à tela inicial do iPhone ou iPad. O pacote inclui um PNG de 180 × 180 px. Confira a aparência em fundo sólido antes de publicar.

Como fazer um favicon que funcione no modo escuro?

Escolha cores com contraste suficiente em fundos claros e escuros. Para versões diferentes por tema, use a ferramenta de favicon SVG e confira as instruções de instalação. O pacote básico não recolore seu logo automaticamente.

É grátis? Minha imagem vai para algum servidor?

Este gerador é gratuito e não exige cadastro. A imagem é processada no navegador, sem envio ao servidor. O limite de entrada é de 10 MB por arquivo.

Qual logo fica melhor em tamanho pequeno?

Use um símbolo simples, uma letra ou uma forma com bom contraste. Textos longos e detalhes finos perdem a leitura em 16 × 16 px. Confira a prévia pequena antes de baixar e instalar.

Ferramenta gratuita

Gerador de favicon: seu logo pronto para o site

Para WordPress, Next.js, React e sites em HTML

Escolha seu logo e gere o favicon da aba do navegador, o ícone da tela inicial do iPhone e os PNGs para Android e PWA. A conversão acontece no seu navegador: a imagem não é enviada ao servidor.

No navegadorSem envio ao servidorGrátisVários tamanhos

Escolha seu logo

PNG, JPG ou SVG de até 10 MB

ou arraste a imagem para cá

Os tamanhos de favicon em um só lugar

Gere os arquivos para navegadores e celulares sem redimensionar cada imagem à mão.

Redimensionamento a partir do original

Cada tamanho é gerado a partir da imagem enviada. Use um logo simples e nítido para manter a leitura mesmo em 16 × 16 px.

Aceita PNG, JPG e SVG

Use a imagem que você já tem. Um SVG é uma boa escolha para gerar diferentes tamanhos a partir de um desenho vetorial.

Um conjunto para seu site

Gere favicon.ico com 16, 32 e 48 px, Apple Touch Icon de 180 px, ícones Android de 192 e 512 px e mstile de 150 px.

Confira o contraste no modo escuro

O ícone precisa ser legível em abas claras e escuras. Se precisar de versões por tema, conheça também o gerador de favicon SVG.

Use no seu CMS ou framework

Baixe os arquivos e copie o HTML. Para WordPress e Next.js, siga também o fluxo de instalação próprio de cada plataforma.

Sua imagem fica no dispositivo

A conversão é feita no navegador. Este gerador não envia seu logo a um servidor.

Como criar um favicon

Da imagem ao pacote de ícones em três etapas.

Escolha a imagem

Abra seu logo em PNG, JPG ou SVG. Prefira uma imagem quadrada e com boa resolução.

Gere os ícones

Clique em Gerar favicons e confira as versões nos diferentes tamanhos.

Baixe e instale

Baixe o pacote ou um arquivo individual e copie as tags HTML para seu site.

Gerar o pacote ou preparar cada arquivo?

Compare o fluxo no navegador com ferramentas que exportam apenas PNG e com a edição manual.

Recurso	Este gerador	Ferramentas só de PNG	Edição manual
Processamento no navegador
Vários tamanhos de uma vez
ICO com várias resoluções
Apple Touch Icon
Ícones PWA e Android
Opções para tema escuro
Sem enviar a imagem ao servidor
Uso gratuito

Sim indica suporte; não indica que o recurso está ausente ou exige trabalho manual.

A comparação resume fluxos comuns. Os recursos de outras ferramentas variam conforme o produto.

Quer entender melhor os favicons? Guia de favicon nos navegadores(inglês)

Tamanhos de favicon: qual arquivo usar?

Entenda onde cada versão do ícone aparece.

A aba do navegador e a tela inicial do celular usam arquivos diferentes. Prepare os tamanhos adequados para não depender de uma única imagem pequena.

Tamanho	Arquivo	Onde usar
16x16	favicon.ico	Abas do navegador
32x32	favicon.ico	Favoritos e barra de tarefas
48x48	favicon.ico	Ícones e atalhos do Windows
180x180	apple-touch-icon.png	Tela inicial do iPhone e iPad
192x192	android-chrome-192x192.png	Ícone para Android e PWA
512x512	android-chrome-512x512.png	Ícone de alta resolução para PWA

O favicon.ico reúne as versões de 16, 32 e 48 px. O navegador ou sistema escolhe qual usar.

O que vem no download

Os ícones do seu site e o código para referenciar os arquivos.

favicon.ico

Um arquivo com as versões de 16, 32 e 48 px para abas, favoritos e atalhos.

apple-touch-icon.png

PNG de 180 × 180 px para o atalho do site na tela inicial do iPhone e iPad.

android-chrome-192x192.png

PNG de 192 × 192 px para Android e instalação de PWA.

android-chrome-512x512.png

PNG de 512 × 512 px para os usos de maior resolução do seu PWA.

Código HTML

Tags prontas para copiar, com os caminhos dos ícones no head da página.

Como colocar o favicon no HTML

Coloque os arquivos na raiz pública do site e adicione as tags abaixo no head. Se usar outra pasta, ajuste os caminhos:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />