Gerador de favicons
Uma imagem entra, um conjunto completo de favicons sai — com prévia real de 16px antes de confirmar
Solte seu logotipo aqui
ou clique para escolher um arquivo — PNG, JPG ou WebP. Uma imagem quadrada de 512 px ou mais funciona melhor.
Nada é enviado. Cada arquivo é desenhado e codificado no seu navegador.
Antes de começar com Gerador de favicons
Gere um conjunto de favicons em vários tamanhos, um ícone de toque da Apple, ícones Android e trechos de HTML prontos para copiar a partir de uma imagem no navegador.
Ideal para
- Criação dos arquivos comuns de favicon e ícones móveis para um site
- Conferindo a legibilidade de um logotipo no tamanho real de 16px do navegador
- Cópia de trechos prontos de head e manifesto para um site
Saiba antes de começar
- O gerador parte de uma origem raster e não redesenha um logotipo
- Marcas muito detalhadas podem não continuar legíveis em 16px
- Um favicon alterado pode continuar no cache dos navegadores depois da publicação
Continue o fluxo de trabalho
Como usar
1. Carregue sua marca
Solte um PNG, JPG ou WebP — uma imagem quadrada de pelo menos 512 px oferece os melhores resultados, porque 512 é o maior arquivo produzido e a ampliação não inventa detalhes. Uma imagem não quadrada recebe uma moldura quadrada de recorte que você pode arrastar ao longo do lado maior, ou você pode mudar para Ajustar e adicionar faixas. Em qualquer caso, ela nunca é esticada. O painel informa as dimensões e se a imagem tem transparência, e avisa quando a origem tem menos de 512 px, porque o arquivo de 512 px será ampliado e ficará pouco nítido. Ajustar é a opção honesta quando nada pode ser cortado, mas considere o custo: um logotipo largo vira uma marca pequena com faixas vazias acima e abaixo, o que representa muito espaço perdido em uma aba de 16 px.
2. Confira a prévia em tamanho real
Os três quadrados são desenhados em 16, 32 e 180 pixels reais sobre amostras claras e escuras, e a aba de navegador simulada abaixo deles coloca a versão de 16 px ao lado de um título de página, onde você normalmente a vê. Essa é a etapa que a maioria dos geradores pula, e é a que salva você: se o quadrado de 16 px for uma mancha, nenhuma quantidade de exportações vai corrigir isso; você precisa de uma marca mais simples. Os controles deslizantes de tamanho da imagem e raio dos cantos alimentam as mesmas prévias, então o preenchimento e o arredondamento aparecem antes de baixar qualquer coisa.
Vale conhecer dois detalhes desse painel. O contorno tracejado ao redor de cada quadrado representa os limites reais do ícone — sem ele, um ícone que recebeu faixas ou foi reduzido pelo controle de tamanho da imagem é indistinguível de um ícone menor, porque a área vazia simplesmente assume a cor da amostra. As amostras claras e escuras mostram a transparência que permanece após a escolha de fundo; é assim que um halo claro incorporado à arte aparece na amostra escura, e um halo escuro, na clara. A aba de navegador simulada é uma interface em CSS ao redor do mesmo canvas de 16 px, não um navegador real; ela se justifica porque 16 px vistos sozinhos ainda parecem maiores do que ao lado de um título de página.
3. Escolha um conjunto e baixe
Escolha o conjunto mínimo ou o conjunto legado, pressione Gerar e baixe os arquivos individualmente ou em ZIP. Copie o trecho de head e o manifesto do painel abaixo — ambos listam exatamente os arquivos gerados, nada mais. O bloco do manifesto é um objeto JSON completo que você pode salvar diretamente em site.webmanifest; ainda precisa de um theme_color e um background_color, que você pode escolher. Preencha o nome do aplicativo e ele aparecerá como apple-mobile-web-app-title no head e como name no manifesto. Deixe vazio e nenhuma das duas linhas será gerada, então o iOS usará o título da página — normalmente a resposta certa.
De quais tamanhos você realmente precisa?
| Tamanho | Arquivo | Usado para |
|---|---|---|
| 16 × 16 | favicon.ico | A aba do navegador e a lista de favoritos em uma tela de densidade padrão. |
| 32 × 32 | favicon.ico | A aba em uma tela de alta densidade, além da barra de tarefas e dos atalhos do Windows. O tamanho 48 é incluído pelo mesmo motivo. |
| 180 × 180 | apple-touch-icon.png | O ícone da tela inicial do iOS quando alguém salva seu site. Deve ser opaco. |
| 192 × 192 | android-chrome-192x192.png | Tela inicial do Android e o pequeno ícone no manifesto do aplicativo web. |
| 512 × 512 | android-chrome-512x512.png | A tela de abertura do aplicativo instalado e o ícone grande do manifesto, exigido pelas solicitações de instalação. |
O .ico contêiner é o que mantém esta lista curta: ele reúne várias imagens em um arquivo, então 16, 32 e 48 vêm juntos e o navegador escolhe o necessário. Por isso um único favicon.ico na raiz atende a todos os casos de abas sem tags extras. PNGs separados de 16 e 32 só são necessários para navegadores antigos que ignoram ICO, que é a finalidade do conjunto legado.
Dois conjuntos de arquivos que você talvez tenha visto em outros lugares estão ausentes de propósito. Blocos do Windows Metro — browserconfig.xml e o mstile-*.png imagens — pertencem à tela inicial do Windows 8 e ao recurso de site fixado que a acompanhava; o Edge parou de lê-las há anos. O favicon da Touch Bar do MacBook desapareceu junto com o hardware. Gerar qualquer um deles hoje só acrescenta arquivos que ninguém solicita e tags que ninguém interpreta, exatamente a bagunça que o conjunto Mínimo busca evitar.
Por que seu logotipo pode não funcionar em 16px
Um ícone de 16 × 16 tem 256 pixels no total. Um logotipo tipográfico perfeitamente legível em um cartão de visita não tem espaço para ser renderizado nessa escala, e o impulso habitual — aumentar o texto — não ajuda, porque a limitação não é o tamanho da fonte. É a densidade das linhas: quantos traços e espaços distintos você está pedindo ao renderizador para acomodar em dezesseis pixels. Cada traço precisa de pelo menos um pixel, e o espaço ao lado dele também. Por isso, qualquer desenho com mais de alguns detalhes por lado vira uma mancha cinza.
O que permanece é uma única forma com uma ou duas cores e espaço interno generoso: uma letra, não uma palavra; uma silhueta, não um contorno; uma forma sólida, não um traço fino. Degradês sutis se achatam, linhas muito finas desaparecem ou ficam serrilhadas como linhas pontilhadas, e os detalhes perto da borda são os primeiros a se perder. Desenhe uma versão simplificada da marca para usar como ícone e confira na prévia acima — comparar o quadrado de 16 px com o de 180 px normalmente torna a decisão óbvia. Se a marca for ilegível no primeiro quadrado, será ilegível em uma aba, e nenhuma configuração de exportação resolverá isso.
O controle deslizante de tamanho da imagem faz parte da mesma escolha. Um preenchimento ao redor de uma marca que chega à borda parece mais organizado em 180 px, mas, em 16 px, cada porcentagem de margem é retirada dos 256 pixels disponíveis para desenhar — reduza para 80% e a arte será renderizada em aproximadamente 164. Use-o quando a marca realmente encostar no enquadramento e confira depois o quadrado de 16 px, em vez de confiar no grande.
Perguntas
Minha imagem é enviada para um servidor?
Não. A imagem é decodificada pelo navegador, desenhada em canvases e codificada em PNG pela API Canvas. O arquivo ICO é montado a partir desses PNGs em JavaScript. Este é um site estático, sem endpoint de envio de arquivos e sem conta — você pode carregar a página, desconectar da rede, e o gerador continuará funcionando.
Por que o apple-touch-icon é opaco?
O iOS não respeita a transparência em um ícone de tela inicial: compõe qualquer alfa sobre preto, então um logotipo transparente chega como um bloco escuro. O gerador preenche a tela de 180 × 180 de ponta a ponta com uma cor escolhida antes de desenhar — incluindo os cantos, mesmo quando há um raio definido, porque o iOS aplica sua própria máscara. Os outros arquivos seguem o controle Fundo e mantêm o alfa quando ele está definido como Transparente, porque abas e inicializadores Android lidam com isso.
O que o raio dos cantos faz com a cor de fundo?
O raio recorta o quadrado, então os cantos de um ícone arredondado são removidos e ficam transparentes — a cor de fundo preenche a forma dentro da curva, não os cantos fora dela. É isso que você quer para uma aba ou um inicializador Android, que desenham o ícone sobre sua própria superfície. O apple-touch-icon é a única exceção: seu preenchimento é pintado de ponta a ponta antes do recorte, incluindo os cantos, porque o iOS aplica sua própria máscara arredondada, e um ícone já arredondado mostraria espaços nos quatro cantos.
Ainda preciso de favicon-16x16.png?
Normalmente não. Todo navegador atual lê as imagens de 16 e 32 px de favicon.ico, então os PNGs separados são duplicatas. Eles só importam para navegadores antigos que ignoram arquivos ICO, e é exatamente isso que o conjunto legado acrescenta. Na dúvida, o conjunto mínimo é a opção padrão mais segura: menos arquivos e um trecho de código curto no head.
E quanto a favicons SVG?
Uma imagem rasterizada não pode se transformar em um SVG verdadeiro. Vetorizar um PNG produz uma aproximação com bordas diferentes, não sua arte original, então esta ferramenta não finge oferecer isso. Se quiser um favicon SVG, exporte-o do arquivo vetorial em que o logotipo foi criado e adicione-o junto com o ICO — os navegadores compatíveis usam o SVG, e os demais recorrem à alternativa. Mantenha o ICO de qualquer forma; o suporte a SVG não é universal.
Relacionado
Para entender cada tamanho, as tags de head, o manifesto e as armadilhas de cache que fazem um favicon alterado parecer igual, leia o guia de tamanhos de favicon — o guia completo por trás desta ferramenta. Se a origem estiver no formato errado ou precisar ser achatada sobre um fundo primeiro, o Conversor de imagens faz isso em lote.