Gerador de favicon

Transforme um logo no conjunto completo de favicons: PNG em todos os tamanhos, um ICO com vários tamanhos, o manifest.json e as tags HTML para o head.

Solte seus arquivos aqui

.png, .jpg, .jpeg, .webp, .svg · até 20 MB

Escolher arquivos

Como criar um favicon

1
Adicione seu logo
PNG, JPG, WebP ou SVG, até 20 MB. Uma imagem quadrada dá o melhor resultado, mas qualquer proporção é aceita.
2
Escolha como encaixar em um quadrado
Recorte um quadrado a partir do centro ou encaixe a imagem inteira e preencha as laterais com a cor que você escolher.
3
Baixe o conjunto de ícones em ZIP
São oito arquivos, ou nove com o ícone maskable do Android: o ICO, quatro tamanhos de PNG, o manifest.json e um trecho pronto para o head.

O que vem no ZIP e para que serve cada arquivo

O favicon.ico guarda três imagens em um só contêiner, de 16, 32 e 48 pixels, e é o arquivo que os navegadores ainda procuram na raiz de um site. O icon-16.png e o icon-32.png são os equivalentes modernos, indicados de forma explícita para que os navegadores que preferem PNG nunca precisem abrir o ICO. O apple-touch-icon.png, de 180 pixels, é o que o iOS usa quando alguém adiciona o seu site à tela de início. O icon-192.png e o icon-512.png são os dois tamanhos que o manifesto de um aplicativo web progressivo (PWA) precisa listar. O manifest.json liga esses dois ícones ao nome do seu app e à cor do tema, e o head-snippet.html é o bloco exato de tags link e meta para colar na sua página, sem adivinhar nomes de atributos nem caminhos de arquivo.

Por que o apple-touch-icon nunca mantém a transparência

O iOS não coloca um fundo razoável por trás de um ícone transparente da tela de início. Ele preenche as áreas vazias com preto, e um logo bem-feito vira um quadrado escuro. Por isso, esse arquivo sempre tem o canal alfa achatado, sobre a cor de fundo que você escolheu ou sobre branco, se o fundo ficou transparente. Nos outros tamanhos, a transparência é mantida quando a imagem original tem transparência e você escolheu essa opção, porque na aba do navegador ou em um atalho da área de trabalho é exatamente isso que se quer. Se, em vez disso, você definir uma cor de fundo, ela é aplicada igualmente a todos os tamanhos, para que o conjunto continue coerente.

Vetor na entrada, nitidez na saída

Quando a imagem original é um SVG, cada tamanho é renderizado direto do vetor, em vez de ser reduzido a partir de um único bitmap grande. Isso faz mais diferença em 16 pixels: um logo reduzido vira um borrão, e um renderizado do zero mantém os traços. Os arquivos SVG passam por uma limpeza antes da renderização: scripts, manipuladores de eventos e qualquer referência a um servidor externo são removidos, do mesmo jeito que faz a nossa ferramenta SVG para PNG. Uma imagem em bitmap primeiro vira um quadrado e depois é reamostrada com o filtro Lanczos, o mais nítido entre os métodos práticos para reduzir ilustrações.

O logo fica no seu dispositivo

A decodificação, o redimensionamento, a codificação em PNG, o contêiner ICO e o ZIP são feitos dentro desta aba do navegador. Nada é enviado, o que faz diferença quando a marca ainda não foi lançada. A maioria dos geradores de favicon online leva uma cópia do seu logo para os próprios servidores antes de devolver qualquer coisa.

Perguntas frequentes

Quais tamanhos vêm no conjunto?

16, 32, 180, 192 e 512 pixels em arquivos PNG, mais um favicon.ico com 16, 32 e 48 em um só arquivo. A versão de 48 pixels existe só dentro do ICO, onde o Windows a usa para exibir atalhos maiores; ela não vem como PNG separado porque nada na web pede esse tamanho.

Por que o apple-touch-icon não tem transparência?

Porque o iOS exibe em preto as áreas transparentes de um ícone da tela de início. Achatar a imagem aqui, sobre a sua cor de fundo ou sobre branco se você manteve a transparência, faz o ícone aparecer do jeito que você o desenhou, e não dentro de um quadrado escuro. É o único arquivo em que a ferramenta decide no seu lugar.

O que é um ícone maskable?

O Android recorta os ícones de apps no formato escolhido pelo aparelho: um círculo, um “squircle”, um quadrado de cantos arredondados. Um ícone maskable mantém todo o conteúdo dentro dos 80% centrais, para que nada importante seja cortado, qualquer que seja o formato aplicado. Ative a opção e você recebe o icon-512-maskable.png e uma terceira entrada no manifesto, marcada com purpose "maskable".

Preciso do manifest.json?

Só se você quiser que o site possa ser instalado como aplicativo web progressivo ou controlar a cor da interface do navegador no Android. Custa um arquivo e uma tag link, e não atrapalha se você nunca usar esses recursos, por isso ele vem incluído por padrão, já preenchido com o nome do seu app e a cor do tema.

Posso partir de um SVG?

Sim, e é assim que se obtém o melhor resultado. Cada tamanho é renderizado a partir do vetor na própria resolução, em vez de reamostrado de um único bitmap, então os tamanhos pequenos continuam legíveis. O SVG passa primeiro por uma limpeza: scripts, manipuladores de eventos e qualquer referência externa são removidos antes da renderização.

Onde colocar as tags geradas?

Dentro do elemento head das suas páginas; já os arquivos PNG, o ICO e o manifesto vão na raiz do site, para que os caminhos do trecho funcionem. Se você os servir a partir de uma subpasta, ajuste os valores href no head-snippet.html para essa subpasta.

Por que meu ícone fica borrado?

Quase sempre porque a imagem original é pequena. Tudo é gerado a partir de uma imagem-base de 512 pixels, então uma imagem com menos de uns 260 pixels precisa ser esticada até lá, e os tamanhos maiores ficam sem nitidez. Comece com pelo menos 512×512, ou com um SVG, e o conjunto inteiro sai nítido. Uma imagem com menos de 32 pixels é recusada de cara, porque não há com o que trabalhar.

O logo é enviado para um servidor?

Não. A imagem nunca sai do seu navegador: ela é decodificada, redimensionada, codificada, empacotada no ICO e compactada em ZIP localmente, e o arquivo ZIP é entregue a você direto da memória.