Gerador de favicon
Transforme uma logo em um pacote completo de favicon para seu site.
Funciona no navegador. Seus arquivos nunca saem do seu dispositivo.
- ICO e vários tamanhos PNG
- HTML pronto para colar
- Espaçamento ajustável
Como gerar um favicon
- Solte aqui uma logo ou imagem quadrada.
- Ajuste o espaçamento e o fundo se precisar.
- Baixe o ZIP e cole o HTML.
O que tem dentro do ZIP
| Arquivo | Tamanho | Usado por |
|---|---|---|
| favicon.ico | 16, 32 e 48 px em um arquivo | Navegadores antigos, favoritos |
| favicon-16x16.png | 16 x 16 | Abas do navegador |
| favicon-32x32.png | 32 x 32 | Abas do navegador, barras de tarefas |
| apple-touch-icon.png | 180 x 180 | Tela inicial do iPhone e iPad |
| android-chrome-192x192.png | 192 x 192 | Tela inicial do Android |
| android-chrome-512x512.png | 512 x 512 | Tela de abertura e ícone de app no Android |
| site.webmanifest | Arquivo de texto | Diz ao Android qual ícone usar |
Para onde vão os arquivos
Envie todos os arquivos do ZIP para a pasta raiz do seu site, a mesma pasta do index.html, não uma subpasta. Depois cole o trecho de HTML fornecido dentro do head de cada página, ou no template de cabeçalho compartilhado do seu site, se ele tiver um.
Dicas de espaçamento e fundo
- Adicione de 10% a 15% de espaçamento para logos que tocam as bordas do quadrado, para não parecerem cortadas no tamanho de 16 pixels.
- Ative o preenchimento de fundo se sua logo tiver transparência e ficar estranha contra a cor da aba do navegador.
- Uma logo simples e de alto contraste fica mais legível em 16x16 do que uma com detalhes finos ou texto fino.
Perguntas frequentes sobre Gerador de favicon
O que tem dentro do ZIP?
favicon.ico com os tamanhos de 16, 32 e 48 pixels, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, dois PNGs android-chrome e um arquivo site.webmanifest.
Para onde vão esses arquivos?
Envie-os para a pasta raiz do seu site e depois cole o trecho de HTML dentro do head de cada página.
Minha imagem já precisa ser quadrada?
Uma logo quadrada dá o resultado mais limpo. Imagens não quadradas são ajustadas dentro de um quadrado com espaçamento, então nada é esticado.
O que o espaçamento faz?
Ele adiciona espaço vazio ao redor da sua logo dentro do quadrado, o que evita que o design toque as bordas em tamanhos pequenos de ícone.
Minha imagem é enviada?
Não. Todo tamanho de ícone é gerado no seu navegador, então a imagem nunca sai do seu dispositivo.
Eu preciso de todos os seis arquivos, ou só do favicon.ico?
Os navegadores modernos usam principalmente os arquivos PNG e o site.webmanifest. O favicon.ico é mantido para navegadores mais antigos e algumas barras de favoritos, então envie todos para o maior suporte possível.
Com que tamanho de imagem eu devo começar?
Pelo menos 512 por 512 pixels. O ícone principal é gerado nesse tamanho, então uma imagem de origem menor é esticada para caber e pode ficar borrada.
O arquivo manifest precisa de edição?
O site.webmanifest gerado usa um texto de exemplo para o nome do site. Depois, abra-o em um editor de texto e atualize os campos name e short_name para combinar com o seu site.