Gerador de favicon

Crie um favicon a partir de qualquer imagem

Um favicon é o pequeno ícone exibido nas abas do navegador, nos favoritos e nas telas iniciais dos celulares. Este gerador pega uma imagem quadrada e produz ícones PNG nítidos em todos os tamanhos de que os sites modernos precisam — do ícone de aba 16×16 ao ícone 512×512 de aplicativo web progressivo — inteiramente no seu navegador.

Solte um logotipo e você verá uma prévia ao vivo de cada tamanho, pronta para baixar individualmente. Também geramos as tags <link> exatas para colar no <head> da sua página, então configurar seu favicon leva segundos.

Dicas para ícones nítidos

Comece com uma imagem quadrada de pelo menos 512×512 pixels. Formas ousadas e simples com forte contraste continuam reconhecíveis quando reduzidas a 16 pixels, enquanto detalhes finos e textos pequenos viram uma mancha. Teste a prévia de 16×16 — se você ainda consegue dizer o que é, tem um ótimo favicon.

Qual tamanho é usado onde

• 16×16 e 32×32 — abas do navegador, favoritos e barras de endereço.
• 48×48 e 64×64 — atalhos da área de trabalho e alguns ícones em resultados de busca e listas de sites.
• 128×128 — listagens maiores de lojas e de extensões.
• 180×180 — o Apple touch icon usado quando uma página é adicionada à tela inicial de um iPhone ou iPad.
• 192×192 e 512×512 — ícones de tela inicial do Android e de aplicativos web progressivos listados em um web app manifest.

Bom saber

Cada imagem é redimensionada diretamente para um quadrado, então use uma origem quadrada; um logotipo retangular seria esticado. A transparência é mantida nos arquivos PNG, mas o iOS não exibe bem touch icons transparentes, então um fundo sólido é uma escolha mais segura para a versão 180×180. Os arquivos são nomeados como favicon-32x32.png, o que corresponde ao trecho gerado, então mantenha esses nomes ao copiá-los para a raiz do seu site. Esta página produz apenas arquivos PNG; se você também quiser um favicon.ico clássico, crie um a partir da sua imagem de origem com o conversor de PNG para ICO.

Adicionando os ícones ao seu site

Baixe os tamanhos de que precisa, coloque-os na raiz pública do seu site e cole as tags <link> geradas no <head>. Se você criar um web app manifest, aponte a lista de ícones para os arquivos 192×192 e 512×512. Depois de publicar, buscadores e navegadores podem demorar a atualizar um favicon em cache, então teste em uma janela privada e não se assuste se o ícone antigo permanecer por um ou dois dias.