Gerador de favicon: ICO, ícones PNG e manifest

Um favicon é o pequeno ícone que aparece nas abas do navegador, nos favoritos, no histórico e nos resultados de busca ao lado do nome do seu site. No celular, versões maiores aparecem na tela inicial quando alguém salva o seu site. Um ícone claro torna seu site fácil de achar entre dezenas de abas abertas e passa uma imagem mais profissional.

Lugares diferentes precisam de tamanhos e formatos diferentes. Os navegadores ainda procuram o favicon.ico, os aparelhos Apple usam um PNG de 180 px, o Android e os web apps instaláveis leem ícones de um web manifest, e os buscadores preferem ícones de pelo menos 48 px.

Os tamanhos de que você precisa

Os tamanhos de favicon explicados em uma linha cada: 16 e 32 px são para abas do navegador, 48 px para o Windows e resultados de busca, 180 px para ícones Apple touch, 192 e 512 px para Android e manifests de web apps. Este gerador cria todos eles, além de versões de 64, 96, 128, 256 e 384 px para outros usos.

Adicione um logo, de preferência quadrado e com pelo menos 512 por 512 pixels. Um PNG com fundo transparente ou um SVG dá os resultados mais nítidos. Escolha um fundo transparente ou sólido, adicione margem se a arte encostar nas bordas e arredonde os cantos se quiser um ícone no estilo de app. As prévias mostram o ícone em 16, 32, 48 e 180 px sobre fundos claros e escuros, para você avaliar como fica em abas de verdade.

Digite o nome do app e a cor do tema para o manifest e toque em Baixar pacote de favicon. Você também pode baixar só o favicon.ico ou um PNG de 512 px.

Começando por um PNG

Para criar um favicon a partir de um PNG, comece pela maior versão que você tiver. Reduzir uma imagem grande gera ícones pequenos nítidos, enquanto ampliar uma imagem minúscula gera borrão. Se seu logo for largo, considere usar só o símbolo ou a inicial, já que texto fica ilegível em 16 px.

favicon.ico

O arquivo favicon.ico é criado com uma conversão de PNG para ICO que guarda imagens de 16, 32 e 48 px dentro de um único arquivo. Navegadores modernos e o Windows leem ícones comprimidos em PNG, o que mantém o arquivo pequeno e as bordas limpas.

Aparelhos Apple

O tamanho do ícone Apple touch é de 180 por 180 pixels. O iOS preenche áreas transparentes com preto, então quando o seu fundo é transparente, o gerador dá automaticamente a este ícone um fundo sólido com a cor do tema.

Android e web apps

Os ícones do web manifest no site.webmanifest são PNGs de 192 e 512 px, incluindo uma versão maskable para o Android, que recorta os ícones em círculos ou quadrados arredondados. Mantenha a arte importante dentro dos 80% centrais do ícone para que nada seja cortado.

Descompacte o pacote e envie os arquivos para a pasta raiz do seu site, o mesmo lugar da página inicial. Depois copie o trecho de HTML para a seção head de cada página, ou para o template do site. O trecho aponta para o ICO, os PNGs de 16 e 32 px, o ícone Apple e o manifest.

Criadores de sites e sistemas de conteúdo muitas vezes têm uma configuração de ícone do site no lugar disso. Nesse caso, envie lá o PNG de 512 px, e a plataforma cria os outros tamanhos sozinha.

Solução de problemas

Se o seu favicon não aparecer depois do envio, os navegadores podem estar usando uma versão em cache. Abra a URL do ícone diretamente e recarregue a página com uma atualização forçada, ou teste em uma janela anônima. Os buscadores podem levar dias ou semanas para atualizar o ícone nos resultados.

Simplifique. Em 16 por 16 pixels, linhas finas e textos pequenos desaparecem. Use um símbolo forte, uma única letra ou uma versão simplificada do seu logo, com contraste alto. Confira as prévias clara e escura: um logo escuro sobre fundo transparente pode sumir em um tema escuro do navegador, um bom motivo para adicionar um fundo sólido ou um contorno claro.

A consistência também importa. Use as mesmas cores da sua marca, que você pode capturar com nosso seletor de cores, e mantenha o ícone reconhecível em todos os tamanhos.

As imagens são processadas no navegador e nunca são enviadas. Arquivos SVG são limpos de scripts e referências externas antes da renderização. Entradas PNG, JPG, WebP, GIF e SVG são suportadas. A ferramenta é grátis e ilimitada e não usa créditos do EnhancerPro.

Próximos passos

Se o seu logo existe só como imagem em pixels, nosso conversor de imagem para SVG pode criar uma versão vetorial, e nossa ferramenta SVG para PNG exporta logos vetoriais em qualquer tamanho.

Abas do navegador

Navegadores de computador costumam mostrar o ícone de 16 ou 32 px nas abas, e a versão de 32 px em telas de alta resolução. Chrome e Edge também usam os ícones PNG maiores para atalhos e para a página de nova aba. Como esses tamanhos são minúsculos, confira a prévia de 16 px com atenção; se o ícone parecer embolado, simplifique a arte ou aumente um pouco a margem.

Resultados de busca

Os buscadores mostram um favicon ao lado do seu site nos resultados, no celular e no computador. Eles preferem um ícone quadrado com lado múltiplo de 48 px e acessível aos rastreadores. Apontar os ícones no head da página inicial, como no trecho gerado, é o jeito padrão de facilitar que eles sejam encontrados.

Telas iniciais

Quando as pessoas adicionam seu site à tela inicial do celular, os iPhones usam o ícone Apple touch e os celulares Android usam os ícones do manifest. Os dois ficam melhores com fundo sólido e um pouco de margem, para que o símbolo não encoste nos cantos arredondados que o sistema adiciona.

Modo escuro

Muita gente usa temas escuros no navegador. Um logo preto sobre fundo transparente desaparece ali. A prévia escura da ferramenta mostra isso na hora. Uma cor de fundo sólida, um contorno claro ou uma versão do logo em duas cores mantém o ícone visível em qualquer lugar.

Como atualizar um ícone existente

Ao trocar um favicon, mantenha os mesmos nomes de arquivo para que os links existentes continuem funcionando. Os navegadores guardam ícones em cache de forma agressiva, então o novo pode demorar a aparecer para quem já visitou o site. Adicionar um parâmetro de versão, como favicon.ico?v=2, aos links no HTML obriga os navegadores a buscar os novos arquivos.

Checklist antes de publicar

Antes de publicar, confira quatro coisas. O arquivo favicon.ico abre no navegador em seu-dominio/favicon.ico. O trecho de HTML está no head da página inicial. O ícone Apple tem fundo sólido e fica bom quando você adiciona o site à tela inicial de um iPhone. O nome e a cor do tema no manifest combinam com a sua marca. Com isso no lugar, seu ícone vai aparecer de forma consistente em abas, favoritos, resultados de busca e telas iniciais, e os visitantes vão reconhecer seu site num piscar de olhos.

Guardando os arquivos de origem

Guarde o logo original e o ZIP juntos no seu projeto. Quando você mudar as cores ou redesenhar o logo no futuro, pode gerar o conjunto completo de novo em um minuto com as mesmas configurações, e todos os tamanhos continuam consistentes. Guarde também a cor do tema que você usou, para que o manifest e os ícones combinem de novo com a sua marca. Uma pasta organizada com o logo, as configurações e os arquivos gerados economiza tempo para quem cuidar do site depois de você, incluindo você mesmo no futuro.