Gerador de favicons — ICO, PNG e Apple Touch Icon
Transforma uma imagem num conjunto completo de favicons: favicon.ico, ícones PNG, um apple-touch-icon e um manifesto de aplicação web.
O apple-touch-icon é sempre opaco. Quando o nome da aplicação está vazio, o manifesto usa o nome do ficheiro da imagem.
Pré-visualização
Ficheiros no ZIP
Como criar um favicon
- Escolhe uma imagem quadrada, de preferência com pelo menos 512 por 512 píxeis, em formato PNG, JPG, WebP ou SVG.
- Escolhe como as imagens não quadradas devem encaixar: contain preenche-as com a cor de fundo, cover recorta-as ao centro.
- Define as cores de fundo e do tema, o espaçamento e se os ícones pequenos mantêm um fundo transparente.
- Escreve o nome da aplicação e o nome curto que o manifesto da aplicação web deve transportar e depois verifica as pré-visualizações ao vivo.
- Descarrega o ZIP com todos os ficheiros ou apanha favicon.ico e apple-touch-icon.png separadamente e copia o fragmento HTML.
Quando ajuda
- Dar um favicon a um site novo sem abrir um editor de imagem.
- Substituir um favicon em falta ou desfocado que aparece como ícone de página em branco nos separadores.
- Adicionar um apple-touch-icon para um site ficar bem quando é guardado no ecrã principal de um iPhone.
- Preparar ícones Android e um manifesto para uma aplicação web progressiva.
- Transformar um logótipo num conjunto de ícones arrumado com espaçamento uniforme em todos os tamanhos.
Perguntas frequentes
Que tamanhos produz o gerador?
Escreve favicon.ico com imagens de 16, 32 e 48 píxeis dentro, ficheiros separados favicon-16x16.png e favicon-32x32.png, um apple-touch-icon.png de 180 por 180 e ícones Android de 192 e 512 píxeis.
Porque é que o apple-touch-icon é sempre opaco?
O iOS não mostra transparência num ícone do ecrã principal, por isso um PNG transparente sairia com um bloco preto ou branco por trás. O gerador preenche esse ficheiro com a tua cor de fundo e deixa os tamanhos pequenos do favicon transparentes se quiseres.
O que devo pôr no manifesto?
Usa o nome completo do site ou da aplicação e um nome curto de cerca de doze caracteres, porque o nome curto é o que aparece por baixo do ícone num telemóvel. A cor do tema tinge a barra do navegador e a cor de fundo preenche o ecrã de arranque.
Posso usar um logótipo SVG?
Sim. O SVG é rasterizado a 512 píxeis de largura e a sua proporção vem dos atributos de largura e altura ou do viewBox, por isso um logótipo quadrado mantém-se quadrado.
Onde ficam os ficheiros no meu servidor?
Coloca-os na raiz do site ao lado do index.html, para que os caminhos do fragmento como /favicon.ico e /site.webmanifest funcionem. Se os guardares numa subpasta, edita os valores href no fragmento para corresponderem.
A minha imagem é enviada para algum lado?
Não. A imagem é descodificada e desenhada num canvas dentro do teu navegador e o ZIP é montado em memória, por isso nada é enviado para um servidor.