Para gerar favicon, solte uma imagem quadrada em PNG, JPG, WebP ou SVG acima, escolha fundo “Transparente” ou “Cor sólida” e uma margem interna e clique em “Gerar favicons”. Você recebe favicon.ico (16, 32 e 48 px), PNGs de 16 e 32 px, um Apple touch icon de 180×180, ícones Android de 192 e 512 px, um site.webmanifest e o HTML para colar, num ZIP.
Como usar a ferramenta Gerador de favicon
- 1
Escolha a imagem de origem
Solte um arquivo PNG, JPG, WebP ou SVG. Uma imagem quadrada funciona melhor; uma imagem não quadrada é centralizada na tela, não esticada.
- 2
Defina fundo e margem
Mantenha o fundo “Transparente” ou escolha “Cor sólida” e use o controle “Margem interna” (0–20 %) para dar um respiro ao ícone.
- 3
Clique em “Gerar favicons”
A ferramenta desenha cada tamanho no seu navegador e monta o arquivo ICO, os ícones PNG e o web manifest.
- 4
Baixe e adicione ao site
Baixe o ZIP, coloque os arquivos na pasta raiz do site e copie as linhas exibidas em “HTML para colar no <head>” para a seção head das suas páginas.
Quais arquivos o gerador de favicon cria?
Navegadores, celulares e sistemas operacionais procuram ícones um pouco diferentes, por isso uma única imagem não basta. Este gerador de favicon produz o conjunto de que a maioria dos sites precisa: favicon.ico, que contém versões de 16, 32 e 48 pixels num só arquivo; favicon-16x16.png e favicon-32x32.png para navegadores que preferem PNG; apple-touch-icon.png em 180×180 para a tela inicial de iPhone e iPad; e android-chrome-192x192.png mais android-chrome-512x512.png para Android e web apps instalados.
Ele também grava um site.webmanifest para Android e web apps instalados e um arquivo favicon-html.txt com o trecho de HTML para as suas páginas. Tudo vem num único ZIP, então você não precisa renomear nem redimensionar nada na mão.
As mesmas tags link aparecem na página depois da geração. Copie-as para a seção head do seu template HTML, ou para as configurações de head do seu CMS ou framework, e envie os arquivos para a raiz do site.
Tamanhos de favicon, transparência e o Apple touch icon
Favicons aparecem bem pequenos, então formas simples sobrevivem melhor. Um ícone de 16 px tem espaço para uma letra ou um símbolo forte, não para um logotipo completo com slogan. Se o seu logo for detalhado, pense em usar só o símbolo ou a inicial como imagem de origem, e confira os resultados de 16 e 32 px antes de publicar.
Um fundo transparente deixa o ícone limpo em abas claras e escuras. O Apple touch icon é a exceção: o iOS mostra ícones transparentes sobre preto, então esse arquivo sempre recebe um fundo sólido. A margem interna adiciona espaço ao redor da arte, o que ajuda ícones que encostam nas bordas a parecer menos apertados na tela inicial.
Se a origem for um SVG, ela é rasterizada em 4× antes de ser reduzida, então até o ícone de 512 px fica nítido. Para origens em PNG ou JPG, comece com uma imagem de pelo menos 512×512 pixels para o maior ícone não precisar ser ampliado.
PNG para ICO sem instalar nada
O formato .ico é antigo, mas continua útil: muitos navegadores e ferramentas pedem o favicon.ico na raiz do site por padrão, mesmo quando nenhuma tag HTML aponta para ele. Montar um ICO com vários tamanhos normalmente exige instalar um plugin gráfico ou uma ferramenta de linha de comando. Aqui, a conversão de PNG para ICO faz parte do mesmo clique que gera os outros ícones.
Para criar favicon.ico, tudo roda no seu navegador. Seu logotipo nunca é enviado aos servidores do Krawly e nada é armazenado, o que importa quando a marca ou o produto ainda não foi lançado. É grátis, sem cadastro e sem marca d'água nos seus ícones.
Dicas para os melhores resultados
- Use uma imagem quadrada de pelo menos 512×512 px, ou um SVG, para os ícones maiores ficarem nítidos.
- Simplifique para tamanhos pequenos: uma letra ou um símbolo é muito mais legível em 16 px do que um logo completo.
- Adicione de 5 a 10 % de margem interna se a arte encostar nas bordas, para não ser cortada pelas máscaras arredondadas da tela inicial.
- Escolha uma cor sólida que combine com a sua marca, já que o Apple touch icon sempre recebe um fundo.
- Navegadores guardam favicons em cache por muito tempo; depois de trocar, teste numa janela anônima para ver o ícone novo.
Perguntas frequentes
De quais tamanhos de favicon eu preciso?
Um conjunto prático é um favicon.ico com 16, 32 e 48 px, favicons PNG de 16 e 32 px, um Apple touch icon de 180×180 e ícones de 192 e 512 px para Android, referenciados num web manifest. Este gerador cria exatamente esse conjunto a partir de uma imagem.
Como adicionar o favicon ao meu site?
Descompacte os arquivos na pasta raiz do site e copie as linhas de HTML exibidas depois da geração (também salvas em favicon-html.txt) para a seção head das suas páginas. São as tags link que dizem aos navegadores e dispositivos onde encontrar os ícones e o manifest.
Posso usar um logo em SVG como origem?
Sim. Origens em SVG são rasterizadas em 4× antes de serem reduzidas para cada tamanho, então os ícones saem nítidos. PNG, JPG e WebP também funcionam; nesses casos, use uma imagem pelo menos tão grande quanto o ícone de 512 px que você quer.
E se a minha imagem não for quadrada?
Ela é centralizada numa tela quadrada e não é esticada, então as proporções ficam corretas. O espaço que sobra fica transparente ou é preenchido com a cor de fundo escolhida. Para o melhor resultado, corte a imagem em formato quadrado antes.
Por que o Apple touch icon tem fundo?
O iOS mostra ícones transparentes da tela inicial sobre um fundo preto, o que pode fazer logos escuros sumirem. Para evitar isso, o apple-touch-icon.png sempre recebe um fundo sólido, mesmo quando os outros ícones são transparentes. Escolha uma cor que combine com o seu logo.
Meu logo é enviado para gerar os favicons?
Não. Todo o redimensionamento, a montagem do ICO e a criação do ZIP rodam no seu navegador. A imagem nunca é enviada aos servidores do Krawly e nada é armazenado. A ferramenta é grátis, sem conta e sem marca d'água.
Privado por padrão. Todos os conversores do Krawly rodam dentro do seu navegador com JavaScript e WebAssembly. Seus arquivos não são enviados, armazenados nem vistos por ninguém — ao fechar a aba, eles somem.