Gerador de favicon

1. 01Envie a imagemPNG ou JPG de até 10 MB. Imagem quadrada dá o melhor resultado, porque o ícone final é quadrado.
2. 02Informe o nome e a cor do temaOs dois entram no site.webmanifest, que é o que o celular usa ao adicionar o site à tela inicial.
3. 03Baixe o zip e cole o HTMLColoque os arquivos na raiz do site e cole as linhas de link dentro do head de todas as páginas.

• Publicar um site novoSem favicon, a aba mostra o ícone genérico de página em branco, o que passa impressão de site inacabado.
• Trocar o ícone depois de uma mudança de marcaGerar tudo de novo em um pacote só evita esquecer justamente o ícone do iPhone.
• Cobrir celular e navegador antigo de uma vezUm PNG único não atende iPhone, Android e navegador que ainda procura favicon.ico na raiz.

• Um logotipo quadrado em PNGO caso ideal. O logotipo é reduzido para cada tamanho e o pacote sai pronto para publicar.
• Uma imagem retangularA imagem é encaixada dentro do quadrado, mantendo a proporção, o que deixa faixas vazias nas laterais.
• Uma marca com texto pequenoEm 16 pixels, texto vira borrão. Nesses casos, uma versão só com a inicial ou com o símbolo funciona bem melhor.

• Pense no tamanho de 16 pixelsEsse é o tamanho real na aba do navegador. Se o desenho não é reconhecível nele, simplifique antes de gerar.
• Os arquivos vão na raiz do siteO HTML gerado aponta para caminhos como /favicon-32x32.png. Colocar os arquivos em outra pasta exige ajustar os links.

Os PNGs de 16 e 32 pixels são o ícone que aparece na aba e nos favoritos do navegador. O apple-touch-icon de 180 pixels é o que o iPhone e o iPad usam quando alguém adiciona o site à tela inicial. Os ícones de 192 e 512 pixels atendem o Android e são os referenciados pelo manifesto. O favicon.ico reúne várias resoluções em um arquivo só e cobre navegadores antigos, que ainda procuram esse arquivo na raiz mesmo sem nenhuma tag apontando para ele. O site.webmanifest descreve o site para o celular, com o nome e a cor do tema que você informou.

Descompacte o zip e envie todos os arquivos para a raiz do site, a mesma pasta onde fica a página inicial. Depois cole o trecho de HTML dentro da tag head, em todas as páginas — em site feito com template ou com framework, isso costuma significar colar uma vez só no layout principal. Só esses dois passos já bastam. Se o ícone antigo continuar aparecendo, o motivo quase sempre é cache do navegador: abrir em aba anônima confirma que o arquivo novo está no ar.

Use a maior versão que você tiver, quadrada, porque reduzir preserva a nitidez e ampliar não. Fundo transparente funciona bem e deixa o ícone se adaptar a temas claros e escuros. Evite imagem com muito detalhe, moldura fina ou texto longo: em 16 pixels de lado, quase tudo isso desaparece. Marca com símbolo próprio costuma render o melhor favicon; marca só com texto costuma funcionar melhor reduzida à inicial.

A imagem é lida, redesenhada em cada tamanho e empacotada dentro do navegador, pelo seu próprio aparelho. Nada sobe para um servidor, nada fica armazenado e não há cadastro. O zip é montado localmente e baixado direto, sem passar por nenhum link temporário.

Quais arquivos vêm no zip?

PNGs de 16, 32, 180, 192 e 512 pixels, um favicon.ico com várias resoluções e o site.webmanifest, além do HTML pronto para colar.

Onde eu coloco os arquivos?

Na raiz do site, junto da página inicial, porque é para lá que o HTML gerado aponta. Em outra pasta, os caminhos precisam ser ajustados.

A imagem precisa ser quadrada?

É o recomendado. Uma imagem retangular é encaixada no quadrado mantendo a proporção, o que deixa espaço vazio nas laterais.

Ainda preciso do favicon.ico?

Vale manter. Navegadores antigos procuram esse arquivo na raiz por conta própria, mesmo sem tag apontando para ele, e ele já vem no pacote.

Por que o ícone antigo continua aparecendo?

Quase sempre é cache do navegador, que guarda favicon por bastante tempo. Teste em uma aba anônima para confirmar que o novo está publicado.