Gerador de favicon — todos os tamanhos que um site precisa
Entra uma imagem; saem favicon.ico, apple-touch-icon, ícones do manifesto e as tags para colar.
Solte os arquivos aqui
ou clique para escolher no seu dispositivoFormatos aceitos: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG
Um arquivo por vezAté 20 MB por arquivo5 usos por diaRemova os limites com o Pro✓ Funciona offline
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. Nada é enviado, nada é armazenado, e você pode até desligar a internet antes de começar.
Exemplo
Todos os favicons de um site a partir de um logo PNG de 1024 × 1024
O logo é um PNG de 1024 × 1024 pixels: uma folha verde simples, centralizada, com fundo transparente. Ajustes: “Imagem inteira”, margem de 10%, “Cantos arredondados”, fundo branco e, como nome do site, “Horta da Bia”.
- Com margem de 10%, a folha ocupa 80% de cada ícone: 12,8 dos 16 px do menor e 409,6 dos 512 px do maior.
- Toque em “Gerar favicons” e baixe o ZIP com os sete arquivos.
- Suba os arquivos para a raiz do site e cole as quatro linhas de favicon-tags.html na seção head de cada página.
| Arquivo | Tamanho | Para quê |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Abas, favoritos e quem pede /favicon.ico |
| favicon-96x96.png | 96 × 96 px | Resultados de busca (múltiplo de 48) |
| apple-touch-icon.png | 180 × 180 px | Tela de início do iPhone e do iPad: quadrado e opaco |
| web-app-manifest-192x192.png | 192 × 192 px | Android |
| web-app-manifest-512x512.png | 512 × 512 px | Android e site instalado como app |
| site.webmanifest | – | O nome “Horta da Bia”, os dois ícones e a cor #ffffff |
| favicon-tags.html | – | As linhas para colar na seção head |
Sete arquivos com a folha sobre um quadrado branco de cantos arredondados; o da Apple é um quadrado branco inteiro, porque o iPhone arredonda sozinho. Não há favicon.svg porque o logo era PNG, e o nome entra inteiro no manifesto: “Horta da Bia” tem 12 caracteres.
Como funciona
- Adicione seu logo: de preferência um SVG quadrado; se não tiver, um PNG ou JPG de pelo menos 512 × 512 px.
- Escolha como ele fica no quadrado — a imagem inteira com margem opcional, ou preenchendo o quadrado — e também o formato e o fundo.
- Toque em “Gerar favicons” e baixe tudo de uma vez em um ZIP.
- Coloque os arquivos na raiz do seu site e cole as tags de favicon-tags.html no <head> das páginas.
Perguntas frequentes
- Qual é o tamanho do favicon?
- O favicon.ico reúne 16 × 16, 32 × 32 e 48 × 48 pixels; os aparelhos Apple usam um PNG de 180 × 180, e o Android e os web apps, 192 × 192 e 512 × 512. Nos resultados de busca o Google mostra o ícone em 48 × 48 ou num múltiplo disso. Este gerador faz todos a partir de uma única imagem.
- Quais arquivos eu recebo, e para que serve cada um?
- favicon.ico reúne 16, 32 e 48 px em um arquivo só, para navegadores e robôs que pedem /favicon.ico direto. favicon-96x96.png é para os resultados de busca, onde o Google quer um múltiplo de 48 px. apple-touch-icon.png (180 px) é o ícone da tela de início do iPhone e do iPad. Os dois PNG web-app-manifest e o site.webmanifest são para Android e web apps instalados. Partindo de um SVG, você recebe também favicon.svg, e favicon-tags.html traz as linhas para colar no <head>.
- É melhor partir de um SVG ou de um PNG?
- De um SVG, se você tiver. Cada tamanho é desenhado a partir do vetor: o ícone de 16 px é desenhado em 16 px, e não reduzido de uma imagem grande, e você ainda recebe o favicon.svg, que os navegadores modernos preferem. Com PNG ou JPG, use pelo menos 512 × 512 px; um logo cheio de detalhes não sobrevive a 16 px de qualquer jeito, e para isso servem a margem e um símbolo mais simples.
- Como colocar o favicon no site?
- Descompacte o ZIP, envie os arquivos para a pasta raiz do site (a mesma da página inicial) e cole na seção head de todas as páginas as quatro linhas de favicon-tags.html: favicon.ico, o PNG de 96 px, o apple-touch-icon e o site.webmanifest. Partindo de um SVG, entra uma quinta linha, a do favicon.svg. O navegador pode mostrar o ícone antigo por um tempo; confira numa aba anônima.
- Por que o nome do site saiu cortado no manifesto?
- O site.webmanifest leva o nome inteiro em name e, em short_name, no máximo 12 caracteres, o que cabe embaixo do ícone na tela do celular. “Horta da Bia” cabe inteiro; “Horta da Lúcia” vira “Horta da”, cortado na última palavra inteira. Use um nome de até 12 caracteres ou edite o short_name no arquivo.
- Por que o Google mostra um globo em vez do meu ícone?
- O Google precisa conseguir rastrear o ícone e a página inicial que aponta para ele, e o ícone deve ser quadrado, com lado múltiplo de 48 px — o arquivo de 96 px daqui é feito para isso. Depois que os arquivos estão no ar, os resultados de busca podem levar dias ou semanas para mudar.
- Meu logo é enviado para algum lugar?
- Não. Cada arquivo é desenhado nesta página com o canvas do seu navegador, e o ZIP também é montado aqui. Nada é enviado a um servidor.
Ferramentas relacionadas
• Redimensionar imagem Ajuste uma ou várias imagens para medidas exatas, ou escolha um tamanho pronto de rede social. ◩ Remover fundo de foto O que está em primeiro plano recortado automaticamente, cabelo incluído, sem a foto sair do seu aparelho. ⇄ Converter imagem Um conversor para todos os formatos comuns, incluindo o HEIC do iPhone e o SVG, sem sair do navegador. • Cortar imagem em círculo Uma foto de perfil redonda, transparente em volta, sem enviar a foto.