Gerador de ícones PWA

Gere os ícones de que uma aplicação web instalável precisa — PNGs de 192 e 512px mais um site.webmanifest — a partir de uma imagem, inteiramente no seu navegador.

Privacidade em primeiro lugar: cada imagem é processada localmente no seu navegador. Nada é enviado, armazenado ou transmitido a nenhum servidor.

Os ícones que tornam uma aplicação instalável

Uma progressive web app é considerada instalável em parte pelos seus ícones: os navegadores procuram um manifesto web que declare pelo menos um PNG de 192×192 e outro de 512×512 antes de oferecerem um pedido de instalação ou colocarem um ícone decente no ecrã principal. Este gerador compõe ambos a partir da sua imagem de origem e escreve um site.webmanifest que os referencia, juntamente com o apple-touch-icon que o iOS quer e um favicon.ico para os separadores normais.

Dê-lhe a forma certa para o launcher

Os launchers Android podem mascarar um ícone num círculo ou num quadrado arredondado, por isso a arte que chega até à borda pode ficar cortada. Adicione margem e um fundo sólido aqui e a parte importante mantém-se dentro da área segura seja qual for a máscara aplicada; a pré-visualização em tempo real mostra o resultado em cada tamanho. Tudo é composto no seu dispositivo com a API Canvas — o seu logótipo nunca é enviado — e o conjunto completo é descarregado num zip.

Perguntas frequentes

A minha imagem é enviada para criar o favicon?
Não. O favicon.ico, os ícones PNG e o manifesto são todos gerados localmente no seu navegador através da API Canvas. A sua imagem nunca sai do seu dispositivo.
Que tamanhos e ficheiros obtenho?
Um favicon.ico multirresolução (16, 32 e 48px), ícones PNG a 16, 32, 48, 180 (apple-touch-icon), 192 e 512px, um site.webmanifest e um fragmento HTML para colar no seu <head>.
Posso converter um PNG ou SVG em ICO?
Sim. Arraste um PNG, JPG, SVG ou WebP e transfira um verdadeiro favicon.ico. Os logótipos SVG são primeiro rasterizados localmente em alta resolução.
Que imagem funciona melhor?
Uma imagem quadrada com um logótipo simples e de alto contraste. As imagens não quadradas são recortadas ao centro para caberem; use os controlos de preenchimento e de forma para a enquadrar como quiser.
Como instalo o favicon?
Descompacte o pacote na pasta raiz do seu site e cole o fragmento HTML fornecido no <head> das suas páginas. O favicon.ico é detetado automaticamente pela maioria dos navegadores.