Gerador de favicon
Crie favicon.ico, ícone Apple touch, ícones para Android e um web manifest a partir de uma imagem, em um único ZIP.
O Gerador de favicon transforma um logo ou imagem no conjunto de arquivos de ícone que um site precisa. Ele corta a imagem em um quadrado centralizado e cria o favicon.ico (com tamanhos de 16, 32 e 48 pixels), ícones PNG de 16 a 512 pixels, um apple-touch-icon.png de 180 × 180 e um arquivo site.webmanifest, tudo em um ZIP. A página também mostra as tags HTML de link para colar na seção head do seu site.
Como instalar seus favicons
Descompacte o pacote na pasta raiz do seu site e adicione estas tags dentro do <head> da página:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Como usar: Gerador de favicon
- 1
Envie seu logo
Arraste ou escolha uma imagem PNG, JPG, SVG ou HEIC. Uma imagem quadrada de pelo menos 512 × 512 pixels dá o melhor resultado.
- 2
Confira se está centralizado
Os ícones são cortados do centro da imagem. Se o seu logo estiver fora do centro ou a imagem não for quadrada, corte em 1:1 primeiro com Cortar imagem.
- 3
Baixe o pacote de favicon
Clique em Baixar pacote de favicon (ZIP) para receber todos os arquivos de ícone e o manifest.
- 4
Adicione ao seu site
Envie os arquivos para a pasta raiz do seu site, depois clique em Copiar código e cole as tags HTML na seção head das suas páginas.
O que faz
- favicon.ico com vários tamanhos
- Um arquivo ICO com ícones de 16 × 16, 32 × 32 e 48 × 48 para abas do navegador e favoritos.
- Ícones PNG para todos os dispositivos
- Arquivos PNG de 16, 32, 48, 64, 128, 192 e 512 pixels, além de um apple-touch-icon.png de 180 × 180.
- Web app manifest
- Um arquivo site.webmanifest que aponta para os ícones de 192 e 512 pixels, para Android e web apps instaláveis.
- Tamanhos pequenos nítidos
- Os ícones são reduzidos em várias etapas a partir da imagem completa, o que deixa as versões de 16 e 32 pixels mais limpas.
- HTML pronto para colar
- Copie as tags de link dos ícones e do manifest com um clique.
Perguntas
De que tamanho deve ser a imagem do favicon?
Use uma imagem quadrada de pelo menos 512 × 512 pixels para o maior ícone continuar nítido. Formas simples e cores fortes continuam reconhecíveis em 16 × 16.
Quais arquivos vêm no ZIP?
favicon.ico, de favicon-16x16.png a favicon-512x512.png (16, 32, 48, 64, 128, 192 e 512), apple-touch-icon.png em 180 × 180 e site.webmanifest.
Onde coloco os arquivos do favicon?
Envie para a pasta raiz do seu site, o mesmo lugar da página inicial. Depois cole as tags HTML mostradas nesta página na seção head de todas as páginas.
Por que parte do meu logo foi cortada?
A ferramenta pega o maior quadrado centralizado da sua imagem. Se o logo for largo ou não estiver centralizado, corte em um quadrado com um pouco de espaço em volta antes de gerar os ícones.
Posso usar um logo em SVG?
Sim. O SVG é desenhado como imagem e salvo em arquivos PNG e ICO. O ZIP não inclui um favicon em SVG.
Preciso editar o arquivo manifest?
Sim. O site.webmanifest usa o nome provisório App e cores de tema escuro. Abra em um editor de texto e mude name, short_name e as cores para combinar com o seu site.