Gerar favicon

Solte uma imagem e baixe o pacote completo de ícones do site: o arquivo .ico, os PNGs da aba, os ícones do iPhone e do Android e o HTML pronto para colar.

Utilize uma imagem quadrada e simples, com pelo menos 512 pixels. Na aba do navegador, o ícone é exibido com 16 pixels, e desenhos com muitos detalhes ou textos pequenos ficam ilegíveis nesse tamanho.

Solte a imagem aqui

ou clique para selecionar. Também é possível colar com Ctrl+V.

Nome do site

Usado pelo Android quando o site é instalado como aplicativo.

Fundo do ícone do iPhone

Manter transparente

O iPhone não aceita transparência no ícone da tela de início: sem uma cor definida, o fundo costuma ficar preto. Os ícones da aba permanecem transparentes.

Como o ícone vai aparecer

Nos tamanhos reais de uso. Se o desenho não for reconhecível no menor tamanho, simplifique a imagem.

Meu site

O que vem no pacote

HTML para colar no site

Deve ser colado dentro do <head> das suas páginas. Os arquivos do ZIP devem ficar na pasta principal do site.

Por que não basta um arquivo só

Cada local que exibe o ícone do seu site exige um formato diferente. O navegador no computador lê o favicon.ico ou um PNG pequeno na aba. O iPhone, quando o site é adicionado à tela de início, aceita apenas PNG e ignora o .ico. O Android utiliza imagens maiores, de 192 e 512 pixels, e lê um arquivo de texto com o nome e a cor do site para instalá-lo como aplicativo.

Um único arquivo grande não atende a todos esses locais: em alguns o ícone não aparece; em outros, fica esticado ou com fundo preto. Por isso, o pacote traz cada arquivo no tamanho e no formato exigidos pelo respectivo destino.

O que fazer com o ZIP

Descompacte o arquivo e copie todos os ícones para a pasta principal do seu site, a mesma da página inicial. Em seguida, cole no <head> o HTML exibido nesta página. Se o site estiver em uma subpasta, acrescente esse caminho no início de cada endereço do HTML.

Os navegadores costumam manter o ícone antigo por algum tempo. Após a troca, recarregue a página com Ctrl+F5 ou abra diretamente o endereço do arquivo para confirmar a atualização.

Sobre o tamanho da imagem

O ideal é utilizar uma imagem quadrada com 512 pixels ou mais, pois os ícones são gerados apenas por redução: ampliar uma imagem pequena deixaria as versões maiores borradas. Se a imagem não for quadrada, ela é centralizada inteira, com as áreas restantes transparentes, e nenhuma parte é cortada.