Gerador de favicon

Como usar o gerador de favicon

A geração demora apenas alguns segundos:

1. 1. Importar uma imagem

   Importe uma imagem quadrada (pelo menos 512x512 px). Formatos suportados: PNG, JPG, WebP.
2. 2. Escolher as opções

   Selecione os tamanhos desejados e se um site.webmanifest deve ser gerado.
3. 3. Transferir o ZIP

   Transfira todos os ficheiros gerados num arquivo ZIP e adicione-os ao seu site.

Onde é apresentado o favicon?

O favicon aparece em diferentes locais na web:

1. Separadores do navegador

   O favicon aparece junto ao título da página no separador – o local mais visível.

2. Favoritos e histórico

   Os navegadores utilizam o favicon na barra de favoritos e no histórico.
3. Ecrã inicial (móvel)

   Quando um utilizador adiciona o site ao ecrã inicial, o Apple Touch Icon ou o ícone PWA é utilizado.
4. Resultados Google

   A Google apresenta o favicon junto ao URL nos resultados de pesquisa móveis.
5. Auditoria Lighthouse

   O Lighthouse verifica a presença de um favicon – é uma boa prática para o desempenho web.

6. Instalação PWA

   Na instalação de uma PWA, os ícones 192x192 e 512x512 são utilizados como ícone da aplicação.

Como transferir os ficheiros gerados

Após a geração dos ícones, tem várias opções de transferência:

1. Transferir tudo em ZIP

   O botão Transferir tudo agrupa todos os ficheiros gerados num único arquivo ZIP. A opção mais prática quando precisa do conjunto completo de ícones.
2. Transferir ficheiros individuais

   Cada ícone gerado tem o seu próprio botão de transferência: pode transferir um único ficheiro sem o conjunto completo. Útil quando precisa de atualizar apenas um tamanho.

Que imagem fonte funciona melhor?

Um favicon é um gráfico muito pequeno, tão pequeno quanto 16x16 píxeis. Nem toda a imagem é adequada como fonte:

1. Formas simples e símbolos legíveis

   Logótipos simples, letras individuais ou símbolos funcionam melhor. Evite gráficos complexos com muitos detalhes.
2. Formato quadrado

   Um favicon é quadrado. Se a imagem fonte tiver proporções diferentes de 1:1, será recortada ou esticada.
3. Tamanho suficientemente grande

   Recomendamos uma imagem fonte de pelo menos 512x512 píxeis. Imagens mais pequenas serão ampliadas.
4. O formato SVG como fonte ideal

   O SVG redimensiona-se sem perda de qualidade, portanto os ícones em todos os tamanhos serão nítidos.
5. Cores com forte contraste

   Um favicon deve ser visível em diferentes fundos (separadores claros, modo escuro). Escolha cores que mantenham a legibilidade.

O que torna este gerador de favicon especial

1. Conforme ao Lighthouse

   Todos os tamanhos exigidos pelo Lighthouse e pelos navegadores modernos – gerados numa única etapa.
2. Todos os formatos numa única etapa

   favicon.ico, ícones PNG e site.webmanifest opcional – tudo a partir de uma única imagem.
3. Suporte PNG, JPG e SVG

   Pode utilizar o seu logótipo em qualquer formato. Se tiver um SVG, os ícones serão nítidos em todos os tamanhos.
4. Pronto para o site e para PWA

   A ferramenta gera o ficheiro manifest.json para aplicações web. Abaixo encontra as instruções de integração dos ícones.