CodeKitHubO que é esta ferramenta?
Um favicon.ico não é apenas uma imagem pequena — é um formato contentor capaz de guardar vários tamanhos do mesmo ícone num único arquivo, para que o navegador, a barra de tarefas ou a barra de favoritos escolham a resolução que fica mais nítida no local onde é mostrada. Renomear um PNG para favicon.ico não consegue isso: continua a ser uma única imagem com a extensão errada, e embora alguns navegadores tolerem isso, muitas ferramentas, rastreadores e navegadores mais antigos que leem os bytes originais esperam a verdadeira estrutura de contentor ICO — e falharão ou mostrarão um ícone em branco.
Esta ferramenta constrói um contentor ICO autêntico: renderiza o seu SVG em 16×16, 32×32 e 48×48, codifica cada um internamente como PNG e empacota os três num favicon.ico válido, usando o mesmo formato «PNG dentro de ICO» que todos os navegadores e sistemas operativos suportam desde o Windows Vista. Além disso, obtém arquivos PNG separados em 180×180 (o tamanho que o iOS usa quando alguém adiciona o seu site à tela inicial) e em 192×192 / 512×512 (os tamanhos que os avisos de instalação do Android e das PWA obtêm do manifesto da sua aplicação web).
Por que usar?
- Produz um favicon.ico multi-resolução verdadeiramente válido, não um PNG renomeado.
- Cobre de uma só vez todos os tamanhos de ícone que uma implementação real precisa: 16, 32, 180, 192, 512px.
- HTML pronto a colar no <head> — sem adivinhar os atributos rel/sizes/type.
- SVGs que não são quadrados ficam centrados sobre um quadrado transparente em vez de esticados.
- Tudo é renderizado localmente no seu navegador; o SVG nunca é carregado.
Como usar
- Clique na caixa ou largue o seu arquivo de logótipo SVG sobre ela.
- A ferramenta renderiza-o automaticamente em todos os tamanhos de favicon — não há definições a configurar.
- Descarregue o favicon.ico para a raiz do seu site, além dos ícones PNG individuais.
- Copie o trecho HTML e cole-o no <head> da sua página.
Exemplo
Entrada
logo.svg — o logótipo de uma empresa, um vetor de 3 KBResultado
favicon.ico (16/32/48px combinados), mais favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngUm SVG à entrada, todos os arquivos de ícone que uma implementação real precisa à saída.
Que tamanho de ícone é usado onde
| Arquivo | Tamanho | Usado para |
|---|---|---|
| favicon.ico | 16/32/48px (combinado) | Separador do navegador, barra de favoritos, barra de tarefas |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Alternativa para navegadores que preferem favicons PNG |
| apple-touch-icon.png | 180×180 | Ícone da tela inicial do iOS ao adicionar o site |
| icon-192.png | 192×192 | Ícone da tela inicial do Android, manifesto de aplicação web |
| icon-512.png | 512×512 | Aviso de instalação de PWA, ícone da tela de abertura do Android |
Porque é que a origem em SVG importa
Como o SVG guarda formas como matemática em vez de píxeis, renderizá-lo de novo em 16px e em 512px parte ambas as vezes exatamente dos mesmos dados de traçado — não há artefactos de ampliação no extremo grande, nem compromissos forçados de alinhamento de píxeis no extremo pequeno. Se só tiver um logótipo em PNG, esta ferramenta não pode ajudar; converta ou recrie primeiro o logótipo como SVG, porque ampliar um PNG pequeno até 512px só produziria um resultado desfocado.
Perguntas frequentes
Porque não renomear simplesmente um PNG para favicon.ico?
Um arquivo .ico tem o seu próprio formato de contentor binário (um cabeçalho ICONDIR que indica quantas imagens contém, seguido de uma entrada de diretório por imagem) — um PNG renomeado para .ico continua a ser apenas um PNG com a extensão errada por dentro. A maioria dos navegadores modernos é tolerante e mostra-o na mesma, mas esta ferramenta constrói um contentor ICO real que aloja três resoluções distintas, que é exatamente para isso que o formato foi concebido e o que leitores mais rigorosos esperam.
Porque preciso de ícones PNG se já tenho favicon.ico?
O favicon.ico cobre apenas o uso clássico de separador de navegador / favoritos. O PNG de 180×180 é o que o iOS usa quando alguém adiciona o seu site à tela inicial (apple-touch-icon), e os PNG de 192×192 / 512×512 são os que os avisos de instalação do Android e das PWA obtêm do manifesto da sua aplicação web. Sem eles, o ícone na tela inicial de um celular volta para uma captura de tela genérica ou um quadrado em branco.
O meu logótipo não é quadrado — o que lhe acontece?
Fica centrado sobre um quadrado transparente em cada tamanho de destino, em vez de esticado, para que um logótipo largo ou alto mantenha as proporções corretas em vez de ficar espremido num quadrado.
Onde devo colocar os arquivos descarregados?
Coloque favicon.ico, apple-touch-icon.png, icon-192.png e icon-512.png na pasta raiz do seu site (junto ao index.html) e depois cole as etiquetas <link> geradas no <head> da sua página.
O meu SVG é carregado para algum lado?
Não. O SVG é renderizado sobre elementos <canvas> locais e os arquivos ICO/PNG são montados no seu navegador. Nada é enviado para um servidor.