Gerador de favicons — ICO, Apple Touch, Web Manifest, PWA
Converta uma imagem PNG, JPEG ou WebP no conjunto completo de favicons modernos: um favicon.ico multi-moldura real, os PNG padrão, um apple-touch-icon opaco, site.webmanifest e browserconfig.xml, gerado no navegador.
Clique ou arraste um PNG, JPEG ou WebP
PNG, JPEG e WebP até 15 MB — o formato é verificado pelos bytes, não pela extensão
A imagem é descodificada e redimensionada localmente. Nada é enviado.
Uma imagem, todos os tamanhos de favicon
Os navegadores, iOS, Android e Windows procuram cada um um ficheiro de favicon diferente. Em vez de exportar cinco ficheiros à mão, esta ferramenta gera todos os tamanhos a partir de uma única imagem: um favicon.ico de várias molduras (16/32/48 px), os PNG de 16 e 32 px, o apple-touch-icon de 180 px, os ícones do Android Chrome de 192 e 512 px e o azulejo do Windows de 150 px.
O .ico é um contentor ICONDIR real com molduras PNG no interior, não um PNG renomeado. O pacote inclui também site.webmanifest e browserconfig.xml, e o README contém o excerto <head> de HTML exato para copiar.
Como gerar um conjunto de favicons
- 1
Arraste uma imagem PNG, JPEG ou WebP. O formato é verificado pelos bytes mágicos, não pela extensão.
- 2
Defina o nome do site e a cor do tema, e escolha como a imagem encaixa no quadrado (conter, cobrir ou esticar) e o fundo.
- 3
Clique em «Gerar conjunto de favicons»: cada PNG e o .ico são renderizados na resolução nativa.
- 4
Transfira o ZIP, copie os ficheiros para a raiz do seu site e cole o excerto <head> do README na sua página.
O que está no pacote
Estes ficheiros são gerados em cada execução. favicon.ico é verificado relendo o contentor e o tamanho em píxeis de cada moldura antes de ser oferecido para transferência.
| Ficheiro | Usado por |
|---|---|
| favicon.ico | Navegadores antigos e separadores: ICO de várias molduras (16/32/48 px). |
| favicon-16x16.png / favicon-32x32.png | Navegadores modernos com as etiquetas <link> de PNG. |
| apple-touch-icon.png | Ecrã inicial do Safari iOS (tem de ser opaco). |
| android-chrome-192x192.png / 512x512.png | Ecrã inicial do Android Chrome e aviso de instalação PWA. |
| mstile-150x150.png | Azulejos afixados do menu Iniciar / barra de tarefas do Windows. |
| site.webmanifest | Manifest PWA que referencia os ícones de 192 e 512 px. |
| browserconfig.xml | Cor de fundo do azulejo do Windows. |
| README.txt | Passos de instalação e excerto <head> de HTML. |
Como instalar
Copie os ficheiros para a raiz do seu site e adicione estas etiquetas ao <head> de cada página:
<link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="msapplication-TileColor" content="#FFFFFF"> <meta name="theme-color" content="#FFFFFF">
Os valores theme-color e msapplication-TileColor coincidem com a cor escolhida. Os ficheiros mantêm os nomes padrão, por isso não é necessária configuração extra.
Porque é que apple-touch-icon.png é opaco
O iOS ignora o canal alfa dos ícones do ecrã inicial e substitui-o por preto, o que fica mal. Esta ferramenta renderiza por isso apple-touch-icon.png sobre um fundo opaco (branco por defeito ou a sua cor personalizada), enquanto os restantes PNG mantêm a transparência escolhida.
Mesmo que a imagem de origem já tenha fundo sólido, a definição transparente continua a produzir um ícone apple opaco, porque apenas esse ficheiro é forçado a ser opaco.
Privacidade
A imagem é descodificada com createImageBitmap e renderizada com Canvas no navegador. Não há upload, conversão no servidor nem contas. O ZIP é montado em memória com JSZip.
Ferramentas relacionadas
Perguntas frequentes
O favicon.ico é um ficheiro ICO real?
Sim. É um contentor ICONDIR com molduras PNG de 16, 32 e 48 px. A ferramenta volta a ler o ficheiro após a codificação para confirmar a estrutura do contentor e o tamanho em píxeis de cada moldura.
A minha imagem é enviada?
Não. A descodificação, o redimensionamento, a codificação e a criação do ZIP acontecem no navegador.
Porque é que apple-touch-icon.png não é transparente?
O iOS substitui o canal alfa dos ícones do ecrã inicial por preto. Para evitar isso, o ícone apple de 180 px é renderizado sobre um fundo opaco (branco por defeito ou a cor escolhida).
Que ficheiros preciso mesmo?
No mínimo favicon.ico e favicon-32x32.png cobrem todos os navegadores modernos. Acrescente apple-touch-icon.png para iOS, os ícones de 192/512 px e site.webmanifest para Android/PWA, e mstile-150x150.png para os azulejos do Windows. O README explica cada um.
Gera safari-pinned-tab.svg?
Não: esse ficheiro é um vetor monocromático que não pode ser derivado de uma imagem de mapa de bits. Forneça-o a partir do seu arte vetorial se quiser o suporte de separador fixado do Safari; o README indica isto.
O que acontece se mudar as definições depois de gerar?
O resultado anterior é invalidado e um novo conjunto é renderizado a partir da sua imagem com o novo ajuste, fundo ou cor, para que a transferência corresponda sempre às definições apresentadas.
Encontrou um problema com esta ferramenta?
Reportar um problema