1. Importar uma imagem
Importe uma imagem quadrada (pelo menos 512x512 px). Formatos suportados: PNG, JPG, WebP.
Crie favicon.ico para o seu site a partir de uma única imagem
Crie a partir de uma única imagem favicon.ico e ícones PNG em todos os tamanhos necessários. Conforme aos requisitos dos navegadores e do Lighthouse – tudo é executado localmente no seu navegador.
Loading tool editor...
Esta ferramenta funciona num ecrã maior
Para utilizar esta ferramenta confortavelmente, abra-a num portátil, computador de secretária ou tablet em modo paisagem.
Dica
Se estiver a utilizar um tablet, mude para o modo paisagem : quando a largura da janela for suficiente, a ferramenta carregará automaticamente.
Porque é que cada site precisa de um favicon?
Um favicon é muito mais do que um pequeno ícone – é um elemento essencial da identidade da marca na web. Os navegadores apresentam-no no separador, os utilizadores veem-no nos favoritos e no histórico, e o Lighthouse verifica a sua presença como boa prática. Sem favicon, um site parece incompleto.
Os sites modernos precisam de favicons em vários tamanhos: um favicon.ico para navegadores antigos, ícones PNG para navegadores de desktop, um Apple Touch Icon para dispositivos iOS e ícones maiores para instalações PWA no Android. Esta ferramenta gera todos os ficheiros necessários a partir de uma única imagem.
Como usar o gerador de favicon
A geração demora apenas alguns segundos:
2. Escolher as opções
Selecione os tamanhos desejados e se um site.webmanifest deve ser gerado.3. Transferir o ZIP
Transfira todos os ficheiros gerados num arquivo ZIP e adicione-os ao seu site.
| Ficheiro | Tamanho | Utilização |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Separador do navegador (padrão) |
| favicon-16x16.png | 16x16 | Separador do navegador (pequeno) |
| favicon-32x32.png | 32x32 | Separador do navegador (Retina) |
| apple-touch-icon.png | 180x180 | Ecrã inicial iOS, Safari |
| android-chrome-192x192.png | 192x192 | Android, instalação PWA |
| android-chrome-512x512.png | 512x512 | Splashscreen PWA, resultados Google |
| site.webmanifest | - | Configuração PWA (opcional) |
Que ficheiros são gerados?
A ferramenta gera todos os ficheiros favicon exigidos pelos navegadores modernos e pelo Lighthouse. Cada ficheiro tem uma função específica:
- favicon.ico – o formato clássico, suportado por todos os navegadores. Contém 16x16 e 32x32 num único ficheiro.
- Apple Touch Icon – apresentado no ecrã inicial iOS quando um utilizador adiciona o site aos favoritos.
- Ícones PWA – para dispositivos Android e Progressive Web Apps. Utilizados na instalação no ecrã inicial.
Onde é apresentado o favicon?
O favicon aparece em diferentes locais na web:
Separadores do navegador
O favicon aparece junto ao título da página no separador – o local mais visível.Favoritos e histórico
Os navegadores utilizam o favicon na barra de favoritos e no histórico.Ecrã inicial (móvel)
Quando um utilizador adiciona o site ao ecrã inicial, o Apple Touch Icon ou o ícone PWA é utilizado.Resultados Google
A Google apresenta o favicon junto ao URL nos resultados de pesquisa móveis.Auditoria Lighthouse
O Lighthouse verifica a presença de um favicon – é uma boa prática para o desempenho web.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:
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.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.
Onde e como adicionar um favicon
WordPress
A maioria dos temas WordPress possui uma opção integrada para configurar o ícone do site. Encontra-a no painel de administração:
Aparência → Personalizar → Identidade do site → Ícone do site
Importe o ficheiro 512x512: o WordPress gera automaticamente os tamanhos mais pequenos. Para controlo total sobre os ícones, também pode importar os ficheiros diretamente para o diretório raiz via FTP.
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:
Formas simples e símbolos legíveis
Logótipos simples, letras individuais ou símbolos funcionam melhor. Evite gráficos complexos com muitos detalhes.Formato quadrado
Um favicon é quadrado. Se a imagem fonte tiver proporções diferentes de 1:1, será recortada ou esticada.Tamanho suficientemente grande
Recomendamos uma imagem fonte de pelo menos 512x512 píxeis. Imagens mais pequenas serão ampliadas.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.Cores com forte contraste
Um favicon deve ser visível em diferentes fundos (separadores claros, modo escuro). Escolha cores que mantenham a legibilidade.
Opções de geração: o que faz cada uma?
Fundo (transparente ou cor)
Por predefinição, o gerador mantém a transparência. Também pode escolher uma cor de fundo específica.
Gerar o manifest (site.webmanifest)
Ficheiro JSON para aplicações web (PWA). Se não está a criar uma PWA, esta opção não é necessária.
O que torna este gerador de favicon especial
Conforme ao Lighthouse
Todos os tamanhos exigidos pelo Lighthouse e pelos navegadores modernos – gerados numa única etapa.Todos os formatos numa única etapa
favicon.ico, ícones PNG e site.webmanifest opcional – tudo a partir de uma única imagem.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.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.
Favicon nos resultados de pesquisa do Google
O Google apresenta os favicons junto ao URL do site nos resultados de pesquisa. Os resultados em dispositivos móveis mostram favicons desde 2019. Os resultados em computador incluem-nos desde janeiro de 2020. O favicon é um elemento visual da marca presente em cada pesquisa no Google.
O Google define requisitos específicos para a apresentação de favicons. O ícone deve ter pelo menos 48×48 píxeis. Deve ser quadrado. A imagem deve ser claramente visível sobre fundo branco. O Google rejeita ícones com conteúdo inadequado ou vazio.
O Googlebot rastreia e indexa os favicons de forma independente do conteúdo da página. A atualização do favicon nos resultados pode demorar de vários dias a várias semanas. O ficheiro favicon não deve estar bloqueado no robots.txt - caso contrário, o Google não conseguirá obter a nova versão.
O Bing também apresenta favicons nos seus resultados. O DuckDuckGo mostra os ícones do site junto a cada ligação. Um conjunto completo de favicons garante uma aparência de marca coerente em todos os motores de pesquisa. Os utilizadores reconhecem os favicons familiares mais rapidamente, o que contribui para uma maior taxa de cliques.
Favicon e identidade visual da marca em Portugal e no Brasil
A coerência visual entre o favicon e o logótipo fortalece a memorização da marca. O ícone aparece nos separadores do navegador, nos favoritos, no histórico de navegação e no ecrã inicial do telemóvel. Quando um utilizador tem dez ou mais separadores abertos, o favicon é o único elemento visível que identifica o site.
Em Portugal, plataformas como Shopify e WooCommerce permitem configurar o favicon nas definições do tema. No Brasil, Loja Integrada e Nuvemshop facilitam a personalização visual das lojas online. O Brasil é um mercado mobile-first - mais de 80 % dos acessos à internet provêm de smartphones, tornando o favicon no ecrã inicial ainda mais relevante.
Sites de comparação como Buscapé e Zoom exibem favicons nos resultados, aumentando a diferenciação visual entre os vendedores. Um favicon profissional sinaliza credibilidade e destaca a loja entre dezenas de resultados concorrentes.
As empresas de serviços - desde escritórios de advocacia até clínicas médicas - constroem confiança já ao nível do ícone no separador do navegador. A ausência de favicon ou o ícone predefinido do navegador pode sugerir falta de profissionalismo.
Favicon para PWA e dispositivos móveis
As Progressive Web Apps requerem ícones adicionais para além do favicon padrão. O ficheiro manifest.json deve incluir um array de ícones com dimensões 192×192 e 512×512 píxeis em formato PNG.
Os ícones maskable são um tipo especial de ícone para dispositivos Android. O sistema operativo recorta os ícones maskable em diferentes formas - círculos, quadrados arredondados ou gotas. A zona segura cobre os 80 % interiores da superfície da imagem. Todos os elementos gráficos essenciais devem estar dentro desta zona para evitar o recorte.
A Apple exige um ficheiro apple-touch-icon separado de 180×180 píxeis. Este ficheiro deve ser declarado na secção head do HTML - o iOS não o lê a partir do ficheiro manifest.
O Brasil lidera a adoção de PWA na América Latina. Magazine Luiza, Mercado Livre e iFood utilizam tecnologia PWA para oferecer experiências rápidas e similares a aplicações nativas. Em Portugal, bancos e serviços adotam progressivamente esta tecnologia.
A auditoria Lighthouse nas ferramentas de desenvolvimento do Chrome verifica a presença e a validade do favicon e dos ícones PWA. Um favicon ausente ou inválido gera um aviso na categoria PWA da auditoria.
Perguntas frequentes sobre o gerador de favicon
O que é um favicon?
Um favicon é o pequeno ícone apresentado no separador do navegador junto ao título da página. Também aparece nos favoritos, no histórico, no ecrã inicial dos dispositivos móveis e nos resultados de pesquisa. Um favicon profissional reforça a identidade da marca e melhora o reconhecimento.
Que tamanhos a ferramenta gera?
A ferramenta gera favicon.ico (16x16 e 32x32 combinados) bem como ícones PNG em 16x16, 32x32, 180x180 (Apple Touch Icon), 192x192 e 512x512 (Android/PWA). Todos os tamanhos correspondem aos requisitos atuais dos navegadores e do Lighthouse.
Que formato de imagem devo utilizar?
Idealmente, uma imagem quadrada em PNG, JPG ou WebP com pelo menos 512x512 píxeis. A ferramenta redimensiona automaticamente a imagem para todos os tamanhos necessários. Quanto maior e mais detalhada a imagem fonte, melhor o resultado.
O site.webmanifest também é gerado?
Sim. Pode opcionalmente gerar um ficheiro site.webmanifest que referencia os ícones PWA (192x192 e 512x512). O ficheiro é incluído no arquivo ZIP com os ícones.
As minhas imagens são enviadas para um servidor?
Não. Todo o processamento é feito localmente no seu navegador através da API Canvas. Os seus ficheiros nunca saem do seu computador e não são armazenados em lado nenhum.
O que é que o Lighthouse verifica em relação aos favicons?
O Lighthouse verifica se uma página possui um favicon válido. Espera no mínimo um ficheiro favicon.ico ou um elemento link rel icon. Verifica também a presença de um Apple Touch Icon (180x180) e de ícones PWA no site.webmanifest. Esta ferramenta gera todos os ficheiros necessários.
Como integrar os favicons no meu site?
Copie os ficheiros gerados para a raiz do seu site. Depois adicione os elementos link correspondentes na secção head. Abaixo da ferramenta, encontra um guia com o código HTML necessário.
Porque é que o favicon não muda depois de importar um novo ficheiro?
Os navegadores fazem cache agressivo dos favicons. Depois de importar um novo ícone, limpe a cache do navegador ou adicione um parâmetro de versão ao caminho do ficheiro (ex.: /favicon.ico?v=2). A alteração pode só ficar visível após algumas horas.
Ajude-nos a melhorar nossas ferramentas
Tem uma ideia para uma nova funcionalidade, encontrou um bug ou quer sugerir outra ferramenta que facilitaria seu trabalho? Escreva-nos – respondemos em 24 horas.