Gerador de Favicon: crie um favicon grátis online

Um favicon é o pequeno ícone de um site. Ele aparece na aba do navegador, nos favoritos e como ícone de aplicativo na tela inicial de smartphones. Para ficar nítido em todos esses lugares, o site precisa de vários tamanhos: o Gerador de Favicon cria versões de 16, 32 e 48 px no favicon.ico, 180 px para iOS e 192 e 512 px para Android.

O Gerador de Favicon é gratuito e não exige uma conta. Sua imagem não é enviada: a geração acontece inteiramente pela API Canvas no seu navegador, sem enviar nem salvar nada em um servidor. A imagem pode ter até 15 MB.

Você recebe favicon.ico com 16, 32 e 48 px em um único arquivo, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png e um site.webmanifest. Você pode baixar cada arquivo separadamente ou todos juntos como favicon-package.zip. Também recebe um trecho de HTML com 6 linhas para o <head> do seu site: ele inclui todos os arquivos e termina com a cor do tema, por exemplo, <meta name="theme-color" content="#18e888"> quando a cor é #18e888.

Não existe um tamanho único: a aba do navegador mostra 16 × 16 px, a barra de tarefas do Windows usa 32 × 32 px, e o Explorador de Arquivos e os atalhos usam 48 × 48 px. O iOS usa 180 × 180 px na tela inicial; o Android, 192 × 192 e 512 × 512 px. O gerador cria todos esses tamanhos a partir de uma imagem. Como detalhes finos e muito texto se perdem em 16 × 16 px, a prévia mostra as versões de 16, 32 e 48 px no tamanho original e os ícones maiores reduzidos antes de você adicionar os arquivos ao site.

Envie a imagem pela aba “Enviar imagem”. Você pode arrastar para ajustar o recorte, aplicar zoom entre 50 e 250 % e cortar automaticamente as bordas transparentes. O gerador reúne as versões de 16, 32 e 48 px em um favicon.ico com vários tamanhos e também cria os ícones PNG para iOS e Android. O ideal é começar com uma imagem quadrada de pelo menos 512 × 512 px, o maior tamanho gerado.

Sim. Na aba “Texto ou emoji”, você pode digitar até 4 caracteres; 1 ou 2 letras ou um único emoji costumam dar o melhor resultado. Você escolhe a cor de fundo, a cor do texto, o formato — arredondado, quadrado ou circular — e o tamanho do texto entre 25 e 80 %. Isso gera os mesmos arquivos que uma imagem enviada.

Envie favicon.ico, apple-touch-icon.png, os dois ícones Android-Chrome e o site.webmanifest para o diretório raiz do seu site, pois o trecho de HTML aponta para caminhos como /favicon.ico e /site.webmanifest. Depois, copie o trecho para o <head> das páginas. Se você não edita o <head> diretamente, como no WordPress, envie um ícone do site por lá, por exemplo, android-chrome-512x512.png. A ferramenta não se conecta diretamente ao seu site nem ao seu CMS.

Ela sempre preenche o fundo do ícone Apple Touch, porque o iOS não processa a transparência dele de forma confiável. Se a opção “Fundo transparente” estiver desativada, ela também preenche o fundo do favicon.ico e dos ícones Android. Além disso, a cor aparece como theme_color e background_color no site.webmanifest e como metatag theme-color no trecho de HTML.