Skip to content
user@convertitive:~$convertitive

Gerador de Favicon

Uma imagem quadrada entra, um conjunto completo de favicons sai. Nada sai do seu navegador.

Uma configuração moderna de favicon em 2026 é um pequeno pacote, não um arquivo só: um favicon.ico clássico para user agents antigos e favoritos antigos, ícones PNG de 16 e 32 pixels para abas do navegador, um apple-touch-icon de 180px para telas de início do iOS e PNGs de 192/512px para o manifesto de web app. A parte do .ico é menos dolorosa do que parece: desde o Windows Vista, as entradas do diretório ICO podem conter imagens codificadas em PNG diretamente, então esta ferramenta renderiza sua imagem em cada tamanho em um canvas, codifica cada uma como PNG e embrulha o trio 16/32/48 em um contêiner ICO que custa apenas um cabeçalho de 6 bytes mais 16 bytes de diretório por imagem — tudo no lado do cliente, sem nada sendo enviado a lugar nenhum.

Drop one image here (PNG, SVG, JPEG, WebP…), or

One file, up to 16 MB. A square 512×512+ source works best. Stays in your browser — nothing is uploaded.

How to use

  1. Solte uma imagem

    Arraste qualquer imagem que seu navegador consiga decodificar — PNG, SVG, JPEG, WebP — para a área de soltar. Uma origem quadrada de pelo menos 512×512 dá os resultados mais nítidos; imagens não quadradas são cortadas automaticamente pelo centro.

  2. Confira as pré-visualizações em tamanho pequeno

    A ferramenta renderiza seu ícone em 16, 32 e 48 pixels sobre um fundo quadriculado claro e um escuro — exatamente os tamanhos que as abas do navegador usam. Se o design vira uma mancha em 16px, simplifique-o antes de publicar.

  3. Baixe o conjunto

    Pegue o favicon.ico (que agrupa entradas PNG de 16, 32 e 48px em um único arquivo) mais os PNGs individuais: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png em 180px e icon-192/icon-512 para o seu manifesto.

  4. Copie as tags do head

    Copie o trecho <link> pronto para o head do seu HTML, coloque os arquivos na raiz do site e referencie icon-192.png e icon-512.png no array icons do manifesto do seu web app.

Frequently asked questions

Minha imagem é enviada para um servidor?
Não. A decodificação, o corte central, o redimensionamento, a codificação em PNG e a montagem do contêiner ICO rodam todos no seu navegador com a API Canvas e JavaScript puro. Não há requisição de upload em nenhum momento — a Convertitive nunca vê sua imagem.
Quais tamanhos realmente importam, e por que exatamente esses?
16×16 e 32×32 cobrem abas do navegador, barras de favoritos e listas de histórico em telas comuns e de alta densidade. 48×48 cobre atalhos de site do Windows e alguns contextos de desktop. 180×180 é o que os iPhones e iPads atuais requisitam para ícones de tela de início. 192×192 e 512×512 são os dois tamanhos que a especificação do manifesto de web app e o prompt de instalação do Android esperam. Todo o resto que os navegadores precisam, eles escalam a partir de um desses.
Ainda preciso de um arquivo .ico em 2026?
Sim, como rede de segurança. Navegadores e crawlers anteriores ao suporte a favicon em PNG, favoritos antigos que fixaram /favicon.ico no código e uma longa cauda de leitores de feed, geradores de prévia de link e bots de monitoramento ainda requisitam /favicon.ico na raiz do site incondicionalmente. Servir um arquivo real ali não custa nada e evita um fluxo constante de 404s nos seus logs.
Fundos transparentes são preservados?
Sim. Toda saída é codificada em PNG — inclusive as entradas dentro do contêiner .ico — e o PNG carrega alfa completo. As pré-visualizações quadriculadas acima existem justamente para você conferir como seu ícone transparente aparece nos temas claro e escuro do navegador antes de se comprometer com ele.
Por que o ícone de toque da Apple tem 180 pixels?
180×180 é o tamanho que o iOS requisita para ícones de tela de início em displays Retina 3x (60pt × 3). Dispositivos mais antigos que querem 152 ou 167 pixels simplesmente reduzem o arquivo de 180px, então enviar o único tamanho maior cobre toda a linha da Apple. Note que o iOS aplica sua própria máscara de cantos arredondados, então forneça um quadrado inteiro — sem cantos pré-arredondados.
E os favicons em SVG?
Navegadores desktop modernos aceitam <link rel=“icon” type=“image/svg+xml”> e é uma ótima adição — um arquivo nítido em qualquer tamanho, que pode até se adaptar ao modo escuro com CSS embutido. Mas o suporte do Safari historicamente ficou para trás e muitos agentes que não são navegadores o ignoram, então o conjunto PNG mais ICO continua sendo a base segura. Envie o SVG como um <link> extra, não como substituto.

About

O contêiner ICO, e por que entradas em PNG funcionam

Um arquivo .ico é um dos formatos de contêiner mais simples ainda em uso diário: um cabeçalho ICONDIR de 6 bytes (palavra reservada, tipo 1 para ícones, contagem de entradas), depois um ICONDIRENTRY de 16 bytes por imagem registrando sua largura e altura (como bytes únicos, onde 0 significa 256), profundidade de bits, tamanho em bytes e offset, seguidos pelos dados brutos das imagens um após o outro. Originalmente esses dados tinham que ser um BMP sem cabeçalho com uma máscara de transparência AND; desde o Windows Vista, os dados podem ser um fluxo PNG completo, que o sistema detecta pelos bytes de assinatura. Essa única mudança é o que torna possível um gerador no lado do cliente tão pequeno — o codificador PNG do próprio canvas.toBlob do navegador faz o trabalho de pixels, e a camada ICO é só 6 + 16×n bytes de contabilidade little-endian escrita com um DataView.

Como os navegadores escolhem a fonte do favicon

Quando vários links de ícone são declarados, os navegadores escolhem pelo tipo rel e pelo atributo sizes: uma aba em uma tela 2x quer 32px, então um <link rel=“icon” sizes=“32x32”> vence um de 16px; se nada declarado corresponde, a maioria dos navegadores recai em requisitar /favicon.ico da raiz do site mesmo sem nenhuma tag link presente. Dispositivos Apple ignoram rel=“icon” para ícones de tela de início por completo e procuram rel=“apple-touch-icon” (com fallback para /apple-touch-icon.png na raiz). Web apps instaláveis não leem nenhum dos dois — eles pegam as entradas de 192 e 512px do array icons do manifesto. Essa divisão — tags link para abas, apple-touch-icon para iOS, manifesto para instalações — é o motivo de um conjunto completo ter três mecanismos de entrega em vez de um.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.