Gerador de favicon: favicon.ico, ícones Apple e Android

Como usar

Escolha Ícone a partir de: Uma imagem, ou Letras ou um emoji sobre uma cor.
Escolha a imagem, ou digite as Letras ou emoji. Ajuste a Cor do fundo e a Cor da letra.
Defina a Cor do tema e o Nome do site, depois clique em Gerar os ícones.
Baixe o ZIP. Coloque os arquivos na pasta principal do seu site e cole as Tags HTML no cabeçalho de cada página.

Os arquivos e seus tamanhos

favicon.ico traz três imagens, de 16, 32 e 48 pixels, para que a aba do navegador, um favorito e o Windows encontrem um tamanho adequado. apple-touch-icon.png tem 180 pixels para a tela inicial de um iPhone ou iPad. android-chrome-192x192.png e android-chrome-512x512.png são os ícones do Android listados no manifesto. site.webmanifest informa o nome do aplicativo e as suas cores.

Transparência e fundo

O favicon mantém as áreas transparentes, então um logotipo aparece sobre qualquer cor que o navegador mostre. Os ícones da Apple e do Android são preenchidos com a cor do fundo, porque um canto transparente de um ícone Apple touch aparece preto no iPhone e no iPad.

Onde ficam os arquivos

Coloque os arquivos na pasta principal do seu site, para que os endereços /favicon.ico e /site.webmanifest funcionem. Os navegadores guardam os ícones em cache por muito tempo: depois de uma mudança, acrescente um número de versão ao link, ou limpe o cache, para ver o novo ícone.

Exemplo: as letras FT sobre azul-escuro

Escolha Letras ou um emoji sobre uma cor, digite FT e mantenha o fundo azul-escuro. A ferramenta desenha as letras no meio de um quadrado arredondado e as ajusta ao quadrado, para que continuem legíveis até no favicon de 16 pixels.

Perguntas frequentes

Minha imagem é enviada quando eu gero os favicons?

Não. Os ícones são desenhados no seu navegador e empacotados no arquivo ZIP no seu dispositivo. Você pode conferir desligando a conexão com a internet depois que a página carregar e gerando um conjunto de ícones.

Qual arquivo o navegador usa para o ícone da aba?

Os navegadores usam o favicon.ico, ou uma tag de link na página que aponta para um arquivo PNG ou SVG. As tags que esta ferramenta gera apontam para o favicon.ico e para o ícone da Apple, então cada navegador encontra um ícone de tamanho adequado.

Por que o meu favicon fica borrado em 16 pixels?

Um ícone pequeno tem muito poucos pixels, então linhas finas e letras pequenas ficam borradas. Use uma forma simples com traços grossos, no máximo duas letras, e confira as imagens de 16 e 32 pixels dentro do arquivo ICO.

Por que os ícones da Apple têm uma cor de fundo?

Um ícone Apple touch com canto transparente mostra esse canto em preto no iPhone e no iPad. A ferramenta preenche todo o quadrado com a cor de fundo que você escolhe.

O que vai no cabeçalho da página?

Cole as quatro linhas da caixa Tags HTML no elemento head de cada página. Elas ligam o favicon.ico, o ícone da Apple, o manifesto e a cor do tema.

Como o manifesto de aplicativo web é usado?

Coloque o site.webmanifest na pasta principal do seu site. O navegador o lê quando um visitante instala o site como aplicativo; ele informa o nome do aplicativo, o nome curto e as cores, e lista os dois ícones do Android.

Fontes

Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.