Gerador de favicon e ícones de aplicativo

O que esta ferramenta faz

Um site precisa de mais de uma imagem pequena para ficar bom em todo lugar. A aba de um navegador de computador pede um ícone de 16 ou 32 pixels, o Windows e os resultados do Google usam um de 48, a tela inicial do iPhone quer 180, e o Android e os aplicativos web instalados pedem 192 e 512 por meio de um arquivo de manifesto. Esta ferramenta pega uma imagem e cria o conjunto inteiro de uma vez: favicon.ico, seis arquivos PNG, o manifesto web e as linhas de HTML que ligam tudo.

Tudo é desenhado no seu navegador. A imagem nunca é enviada, então um logotipo ainda não lançado continua privado.

Como criar os ícones

1. Solte o logotipo na caixa ou escolha o arquivo. PNG, JPG, WebP, GIF e SVG funcionam. Uma imagem quadrada de 512 pixels ou mais dá o melhor resultado, e um SVG continua nítido em todos os tamanhos porque é redesenhado para cada um.
2. Confira a lista de pré-visualização. Use Ajuste para manter a imagem inteira ou preencher o quadrado cortando o lado maior, Margem para deixar espaço em volta e Cantos arredondados para uma forma mais suave. Ligue o fundo para preencher o ícone com uma cor, que também vira a cor do tema no manifesto.
3. Digite o nome do app e baixe arquivos soltos ou o ZIP completo.

O que você recebe

• favicon.ico guarda três imagens, de 16, 32 e 48 pixels, em um só arquivo. Ele começa com um cabeçalho de 6 bytes e uma entrada de 16 bytes por imagem, então o diretório tem 54 bytes antes da primeira imagem. Cada imagem interna é um PNG, que todos os navegadores atuais leem.
• favicon-16x16.png, favicon-32x32.png e favicon-48x48.png para lugares que pedem arquivos separados.
• apple-touch-icon.png com 180 por 180 pixels. O iOS pinta a transparência de preto e arredonda os cantos sozinho, então este ícone é sempre quadrado e sempre preenchido, de branco se você não escolheu fundo.
• icon-192.png e icon-512.png para Android e aplicativos web instalados.
• site.webmanifest, um pequeno arquivo JSON que dá nome ao app e lista os dois ícones grandes.

Colocando no seu site

Envie os arquivos para a raiz do site, de modo que abram em /favicon.ico e /icon-192.png, e cole as linhas geradas no head de cada página. O navegador também pede /favicon.ico por conta própria, mesmo sem HTML, por isso o nome do arquivo importa. Se guardar os arquivos em outra pasta, mude os caminhos no trecho e no manifesto.

Dicas que poupam tempo

• Desenhe para 16 pixels. Linhas finas e texto pequeno somem. Uma forma forte ou uma ou duas letras sobrevivem.
• Use a margem para ícones maskable. O Android pode recortar o ícone em círculo ou quadrado arredondado. Manter o importante nos 80 por cento centrais é seguro.
• Navegadores guardam favicons por muito tempo. Depois de trocar um, recarregue sem cache ou abra a página em uma janela anônima para ver o novo.
• Confira o contraste. Um logotipo escuro sobre fundo transparente some no tema escuro. Um fundo colorido resolve.