Gerador de favicon
Cria o favicon.ico, ícones PNG, o apple-touch-icon e o site.webmanifest a partir de uma imagem ou emoji, com etiquetas HTML prontas. ZIP, sem envio.
Um a três caracteres funcionam melhor, por exemplo uma letra, iniciais ou um emoji.
site.webmanifest
Pré-visualização em tamanho real
Ficheiros no ZIP
Como criar um favicon
- Em Origem, escolhe Imagem ou Texto ou emoji. - Imagem: larga um PNG, JPG, WebP ou SVG. Um logótipo quadrado com pelo menos 512 × 512 px funciona melhor. Escolhe Imagem inteira para a encaixar dentro do ícone, ou Preencher e recortar para cobrir todo o quadrado. - Texto ou emoji: escreve uma letra, umas iniciais ou um emoji e escolhe o Tipo de letra, Negrito e a Cor do texto.
- Define a Cor de fundo ou marca Fundo transparente. Escolhe uma Forma (Quadrado, Arredondado ou Círculo) e uma Margem interior (%) para deixar espaço à volta do conteúdo.
- Se quiseres, abre site.webmanifest para indicar o Nome da aplicação (web manifest), o Nome curto, a Cor do tema e o URL da pasta dos ícones (mantém
/se os ficheiros ficarem na raiz do teu site). - Clica em Gerar favicons. Os ícones aparecem no tamanho real, ao lado de um separador de navegador simulado. A partir daí, cada alteração atualiza-os de imediato.
- Clica em Transferir ZIP, carrega os ficheiros para o teu site, depois clica em Copiar etiquetas e cola-as dentro do
<head>das tuas páginas.
O que contém o ZIP
| Ficheiro | Tamanho | Usado por |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Separadores do navegador, marcadores, navegadores antigos, Windows |
| favicon-16x16.png | 16 × 16 | Separadores do navegador |
| favicon-32x32.png | 32 × 32 | Separadores em ecrãs de alta densidade, atalhos na barra de tarefas |
| apple-touch-icon.png | 180 × 180 | Ecrã principal do iPhone e do iPad |
| android-chrome-192x192.png | 192 × 192 | Ecrã principal do Android (web manifest) |
| android-chrome-512x512.png | 512 × 512 | Ecrãs de arranque na instalação (web manifest) |
| site.webmanifest | — | Nome, cores e ícones de um site instalável |
| favicon-tags.html | — | As etiquetas HTML, para referência |
O ficheiro ICO contém três imagens PNG, um formato que o Windows (desde o Vista) e todos os navegadores atuais leem. O apple-touch-icon é sempre gravado com um fundo sólido, porque o iOS mostra os píxeis transparentes a preto; com fundo transparente, é usado o branco.
As etiquetas HTML
As etiquetas geradas têm este aspeto (com o URL da tua pasta):
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="theme-color" content="#ffffff">
Os navegadores também pedem automaticamente o /favicon.ico na raiz do teu domínio, por isso mantê-lo lá ajuda mesmo em páginas sem estas etiquetas.
Dicas de design
- Mantém-no simples. A 16 × 16 px, os detalhes desaparecem. Uma única letra, um símbolo forte ou a versão mais simples do teu logótipo leem-se melhor.
- Verifica a pré-visualização em tamanho real. O ícone de 16 px no separador simulado é o que os visitantes realmente veem.
- Pensa no modo escuro. Um logótipo escuro sobre fundo transparente pode desaparecer nos temas escuros dos navegadores; um fundo colorido ou uma pequena margem interior ajudam.
- Os emojis têm um aspeto diferente em cada sistema, porque cada plataforma desenha os emojis no seu próprio estilo. Os ficheiros PNG mantêm o aspeto que têm no teu dispositivo.
Perguntas frequentes
De que tamanhos precisa um favicon?
Na prática: um favicon.ico com 16, 32 e 48 px, um apple-touch-icon de 180 px e PNG de 192 e 512 px para o web manifest. Esta ferramenta cria todos a partir de uma única origem.
Posso usar um logótipo em SVG?
Sim. Os ficheiros SVG são desenhados em alta resolução antes de os ícones serem criados. O SVG é mostrado como uma imagem simples, por isso os seus scripts nunca são executados.
Como faço um favicon com um emoji?
Escolhe Texto ou emoji, escreve ou cola o emoji, escolhe um fundo ou deixa-o transparente e gera os ícones. O resultado é um verdadeiro PNG e ICO, por isso funciona em todos os navegadores.
Porque é que o meu novo favicon não aparece?
Os navegadores guardam os favicons na cache de forma muito persistente. Recarrega a página limpando a cache, abre o site numa janela privada ou acrescenta uma versão ao URL, como /favicon.ico?v=2.
A minha imagem é enviada?
Não. Os ícones, o ZIP e o manifest são criados no teu navegador; nada sai do teu dispositivo.
Ferramentas relacionadas
- Conversor de formatos de imagem Converte imagens entre PNG, JPG, WebP, BMP e ICO no teu navegador. Conversão em lote, tamanhos de favicon e opções de transparência, sem enviar nada.
- SVG para PNG Converte SVG para PNG, JPG ou WebP no teu navegador, com qualquer largura, altura, escala ou DPI e fundo transparente ou de cor. Em lote e ZIP, sem envio.
- Gerador de meta tags Gerador de meta tags gratuito para título, meta description, URL canónico, robots e viewport, com verificação do comprimento e HTML corretamente escapado.
- Redimensionar imagens Redimensiona imagens JPG, PNG e WebP por píxeis ou percentagem, mantém a proporção e processa várias fotos de uma vez, diretamente no teu navegador.