Gerador de Favicon: Como Criar um Favicon de um PNG

Todo website precisa de um favicon. É o pequeno ícone quadrado que aparece nas abas do navegador, na barra de favoritos, no histórico do navegador e na tela inicial do iOS ou Android quando um visitante salva um atalho para o seu site. Ele também aparece nos resultados da Pesquisa Google ao lado do nome do seu site — um detalhe que afeta a aparência da sua marca para qualquer pessoa que o encontre por meio da pesquisa orgânica. Sem um favicon, os navegadores voltam a usar um ícone genérico de página em branco que faz com que até mesmo um site polido pareça inacabado. Se você já tem um logotipo em PNG, um gerador de favicon o transforma em um favicon.ico funcional em menos de um minuto, sem instalação e sem necessidade de conta.

Quais tamanhos de favicon você realmente precisa?

Não existe um tamanho único e universal de favicon porque diferentes contextos puxam diferentes resoluções do mesmo conjunto de arquivos. O conjunto prático cobre seis tamanhos:

Tamanho	Formato	Caso de uso
16×16	ICO / PNG	Barra de abas do navegador, barra de endereços
32×32	ICO / PNG	Atalho da barra de tarefas, aba em telas de alta DPI
48×48	ICO	Atalho da área de trabalho do Windows
180×180	PNG	Ícone de toque da Apple — tela inicial do iOS
192×192	PNG	Atalho da tela inicial do Android via manifest web
512×512	PNG	Tela de splash do Android via manifest web

O tamanho do favicon a partir do qual você começa é importante. Sempre trabalhe a partir de uma fonte quadrada grande — 512×512 ou maior — para que todos os tamanhos menores sejam reduzidos de forma limpa. Redimensionar a partir de um thumbnail de 16×16 cria borrão que nenhuma quantidade de nitidez corrige.

Para a maioria dos sites, o arquivo ICO lida com as camadas de 16×16, 32×32 e 48×48 em um único contêiner. Os tamanhos de 180×180, 192×192 e 512×512 são PNGs separados referenciados em HTML ou em um manifest web.

ICO vs PNG vs SVG

Todos os três formatos funcionam como favicons para um site. A resposta certa é usar mais de um.

ICO é um formato de contêiner da Microsoft que agrupa vários tamanhos em um único arquivo. Coloque favicon.ico na raiz do seu domínio e todos os navegadores — incluindo os mais antigos — o encontrarão automaticamente sem qualquer marcação HTML. Um arquivo, zero configuração.

PNG é suportado por todos os navegadores modernos quando declarado com uma tag <link>. É o único formato que funciona para ícones de toque da Apple e ícones de manifest do Android. O PNG também preserva a transparência total do canal alfa, para que seu ícone pareça limpo em qualquer cor de fundo da aba.

SVG é um formato vetorial suportado por Chrome, Firefox e Edge. Como ele escala para qualquer resolução sem pixelização, um único arquivo SVG cobre todas as densidades de exibição. O SVG também suporta consultas de mídia prefers-color-scheme incorporadas, o que permite que o favicon mude automaticamente entre uma versão escura e clara. O Safari ainda não suporta favicons SVG, então o SVG não pode substituir o ICO — mas é um forte complemento.

Recomendação prática: publique favicon.ico (contendo 16×16, 32×32, 48×48) como fallback, adicione um SVG para navegadores modernos e modo escuro, e inclua um PNG 180×180 para o ícone de toque da Apple. Essa combinação cobre todos os principais navegadores e dispositivos.

Como criar um favicon a partir de um PNG

Os passos a seguir mostram como criar um favicon para um site usando o conversor de PNG para ICO em privateconvert.org. A ferramenta funciona inteiramente no seu navegador — o arquivo nunca sai do seu dispositivo, não há conta para criar e nenhuma marca d’água é adicionada à sua saída.

1. Prepare seu PNG de origem. Use uma imagem quadrada de 512×512 pixels ou maior. Se o seu logotipo for uma marca d’água horizontal, corte para apenas o símbolo ou a primeira inicial — marcas d’água se tornam ilegíveis com 16 pixels de largura. Certifique-se de que o PNG tenha um fundo transparente se você quiser que o ícone pareça limpo em qualquer cor de aba.

2. Abra o conversor. Acesse privateconvert.org/tools/png-to-ico.

3. Solte seu PNG na página. Não há botão “upload” para procurar — arraste o arquivo diretamente para a área de upload.

4. Baixe o arquivo ICO. O conversor gera um favicon.ico contendo as camadas padrão de 16×16, 32×32 e 48×48. Clique em download. O arquivo está pronto para ser implantado.

5. Crie os tamanhos PNG adicionais, se necessário. Para o ícone de toque da Apple, redimensione seu PNG de origem para 180×180. Para ícones de manifest do Android, produza um de 192×192 e um de 512×512. Qualquer editor de imagem ou redimensionador online funciona; o conversor ICO em privateconvert.org lida com o lado ICO.

Algumas dicas antes de converter:

• Comece pela versão de maior resolução do seu logotipo, não por um thumbnail compactado.
• O conversor preserva a transparência do canal alfa, portanto, um PNG com uma borda em forma ou transparente permanece nítido na saída ICO.
• Se você estiver executando um ambiente de teste junto com a produção, use uma cor de fundo diferente no favicon de teste. A diferença visual instantânea na aba informa rapidamente em qual ambiente você está.

Como adicionar um favicon ao seu site (HTML)

Coloque favicon.ico no diretório raiz do seu domínio. A maioria dos navegadores verifica seusite.com/favicon.ico automaticamente — sem a necessidade de marcação. Para controle explícito sobre cada formato e tamanho, adicione as seguintes tags dentro do seu <head>:

<!-- Falha de ICO — funciona em todos os navegadores sem mais marcação -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Tamanhos PNG para navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG para navegadores modernos + troca de modo escuro -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Ícone de toque da Apple para a tela inicial do iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Se você tiver apenas um arquivo e quiser a configuração mais simples possível, a tag ICO única é o fallback mínimo viável:

<link rel="icon" href="/favicon.ico">

Para suporte à tela inicial do Android e Progressive Web App, adicione um manifest web referenciando seus PNGs de 192×192 e 512×512:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Salve o manifest como manifest.webmanifest e referencie-o em <head>:

<link rel="manifest" href="/manifest.webmanifest">

O valor "purpose": "any maskable" na entrada 512×512 informa ao Android para usar um ícone de inicializador adaptativo que se ajusta à sua grade de ícones em forma sem cortes.

Como adicionar um favicon no WordPress, Shopify e Squarespace

Cada plataforma oferece um campo de interface de usuário dedicado para que você não precise editar HTML ou carregar arquivos via FTP.

WordPress: Vá para Aparência > Personalizar > Identidade do Site. Procure o campo “Ícone do Site” perto da parte inferior. Clique em “Selecionar ícone do site”, carregue seu PNG e, se solicitado, recorte. O WordPress aceita qualquer imagem quadrada e lida com o redimensionamento. Use pelo menos 512×512 para a origem. Clique em “Publicar” para salvar.

Shopify: Vá para Loja Online > Temas, clique em “Personalizar” em seu tema ativo e, em seguida, abra “Configurações do tema” (ou a seção do cabeçalho, dependendo do seu tema). Encontre o campo “Favicon”, clique em “Selecionar imagem” e carregue um PNG ou ICO quadrado. Salve e publique o tema. O ícone aparece em alguns minutos.

Squarespace: Vá para Site > Páginas e, em seguida, clique em “Ferramentas do Site” na parte inferior da barra lateral esquerda. Selecione “Favicon”. Carregue um PNG quadrado — o Squarespace o redimensiona automaticamente. Salve a página.

Em todos os três casos, o fluxo de trabalho é o mesmo: produza um PNG quadrado limpo de 512×512 ou maior usando um gerador de favicon e, em seguida, deixe a plataforma lidar com o dimensionamento da exibição.

Por que seu favicon não está aparecendo

Um favicon que funciona no desenvolvimento, mas se recusa a aparecer na produção — ou desaparece após uma atualização — geralmente remonta a uma das cinco causas.

Cache do navegador. Favicons são armazenados em cache agressivamente. Atualize completamente com Ctrl+Shift+R (Windows/Linux) ou Cmd+Shift+R (Mac). Se o ícone ainda não aparecer, limpe o cache do navegador completamente ou teste em uma janela privada/anônima. Alguns navegadores exigem fechar e reabrir a aba antes que o cache seja limpo para favicons.

Caminho do arquivo errado. favicon.ico deve estar exatamente na raiz do seu domínio — seusite.com/favicon.ico, não seusite.com/assets/favicon.ico. Se você usa uma tag <link> com um caminho relativo, verifique se o caminho se resolve corretamente a partir da página que você está testando, não apenas a partir da página inicial.

PNG renomeado se passando por ICO. Alterar a extensão de um arquivo de .png para .ico não o converte. O formato ICO é um contêiner binário; um PNG renomeado ainda é um PNG e navegadores que inspecionam o cabeçalho do arquivo o ignorarão. Execute o arquivo através de um gerador de favicon real para produzir um ICO real.

Incompatibilidade HTTPS vs HTTP. Os navegadores bloqueiam solicitações de conteúdo misto. Se o seu site é servido via HTTPS, mas a tag <link> do favicon aponta para http://, a solicitação é bloqueada silenciosamente. Verifique se o URL do favicon usa https://.

Cache CDN. Se o seu site está por trás de um CDN (Cloudflare, Fastly, etc.), os nós de borda podem estar servindo uma versão desatualizada de favicon.ico mesmo depois que você a substituiu na origem. Limpe o cache do CDN especificamente para o URL do favicon, ou adicione uma string de consulta para quebrar o cache: href="/favicon.ico?v=2".

Perguntas frequentes

Qual é o tamanho mínimo de um favicon? 16×16 pixels é o tamanho mínimo que os navegadores exibem nas abas. Dito isso, você sempre deve incluir 32×32 também — telas de alta DPI e atalhos da barra de tarefas precisam da versão maior para permanecerem nítidos. Se você usa privateconvert.org/tools/png-to-ico, a saída ICO inclui ambos os tamanhos automaticamente.

Devo usar PNG ou ICO para o meu favicon? Use ambos. ICO funciona como um fallback universal que os navegadores encontram automaticamente sem qualquer marcação HTML — é o que os navegadores procuram quando nenhuma tag <link> está presente. PNG funciona para navegadores modernos quando declarado explicitamente e é necessário para ícones de toque da Apple e ícones de manifest do Android. Os dois formatos servem a propósitos diferentes e não são intercambiáveis.

Um favicon afeta o SEO? Não diretamente — o Google não usa o favicon como um sinal de classificação. No entanto, ele aparece nos resultados da Pesquisa Google ao lado do nome do seu site na SERP. Um favicon limpo e reconhecível reforça o reconhecimento da marca e pode contribuir para a taxa de cliques. Um favicon ausente ou quebrado mostra um ícone de globo genérico nos resultados da pesquisa.

Como crio um favicon que muda para o modo escuro? Use um favicon SVG com uma consulta de mídia prefers-color-scheme incorporada:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Referencie o SVG junto com seu fallback ICO:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

Navegadores que suportam favicons SVG usam a versão escalável e que alterna de cor. Safari e navegadores mais antigos voltam para ICO.

O que é um ícone de toque da Apple e preciso de um? O ícone de toque da Apple é a imagem que o iOS usa quando um visitante salva seu site na tela inicial. Sem um, o iOS ou tira uma captura de tela da sua página ou usa seu favicon comum, ambos com aparência ruim no tamanho de exibição de 180×180. Produza um PNG de 180×180 com um fundo sólido (o iOS preenche a transparência com branco e recorta os cantos), adicione 20 pixels de preenchimento para que a arte fique visível sobre a máscara de cantos arredondados e referencie-o:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

O que é um ícone mascarável? O iniciador adaptável do Android recorta ícones em um círculo, lágrima ou squircle dependendo do dispositivo. Um ícone mascarável inclui preenchimento extra ao redor da arte — chamada “zona segura” — para que o ícone pareça intencional após o recorte, em vez de acidentalmente cortado. Adicione "purpose": "any maskable" à sua entrada 512×512 no manifest web para informar ao Android que ele pode aplicar a máscara adaptável.

Qual imagem funciona melhor como favicon? Formas simples e de alto contraste. Uma única letra, uma marca geométrica ou um símbolo de logotipo ousado permanece legível em 16 pixels. Ilustrações detalhadas, traços finos e marcas de palavras completas se transformam em ruído em tamanhos pequenos. Se seu logotipo só funciona como um arranjo horizontal, use o favicon como uma chance de criar um ícone de aplicativo dedicado — apenas o símbolo, sem o tipo. Você pode criar favicon de png em segundos em privateconvert.org/tools/png-to-ico para testar como sua arte se comporta em tamanhos pequenos antes de se comprometer.

---

Pronto para criar seu favicon? Abra o conversor de PNG para ICO em privateconvert.org — solte seu PNG, baixe o ICO e seu favicon estará pronto. Sem conta, sem marca d’água, sem upload de arquivo.