A importância dos favicons e ícones de site na presença web
Os favicons e os ícones de site desempenham um papel fundamental na identidade visual e na credibilidade de qualquer projeto online. Estes pequenos elementos gráficos aparecem nos separadores dos navegadores, nos marcadores, nos históricos de navegação e nos ecrãs principais de dispositivos móveis, ajudando os utilizadores a identificar rapidamente o seu site no meio de várias páginas abertas.
Para além do aspeto estético, a presença de um conjunto completo de ícones otimizados melhora a experiência do utilizador e garante que a sua marca seja representada de forma profissional em qualquer plataforma ou dispositivo.
Tipos de ícones e resoluções necessárias
O ecossistema de dispositivos atual exige diferentes formatos e tamanhos de imagem para que a exibição seja correta em todos os cenários. Este gerador processa a sua imagem de origem e cria automaticamente os seguintes ficheiros essenciais:
- favicon.ico: O formato clássico para navegadores, que agrupa as resoluções de 16, 32 e 48 píxeis dentro de um único ficheiro. É utilizado principalmente como o ícone de separador clássico.
- Ícones PNG: Gerados nos tamanhos de 16, 32, 180, 192 e 512 píxeis. Servem para separadores modernos, dispositivos Android e aplicações web instaladas (PWAs).
- Apple touch icon: O ícone de 180 píxeis é otimizado especificamente para o ecrã principal do iPhone e iPad.
- Vetor SVG: Se a imagem de origem for um SVG, o próprio vetor é incluído no pacote, garantindo uma nitidez absoluta em qualquer tamanho e compatibilidade com navegadores modernos.
- site.webmanifest: Um ficheiro de texto pequeno que lista os ícones maiores e informa os dispositivos sobre onde os ícones estão localizados, essencial para Progressive Web Apps.
Seleção da imagem de origem: SVG vs. Raster
A qualidade final dos seus ícones depende diretamente do ficheiro que submete ao gerador. O limite máximo para o tamanho do ficheiro é de 50 MB.
| Formato de Origem | Resolução Recomendada | Comportamento no Redimensionamento |
|---|---|---|
| SVG | Qualquer tamanho (vetorial) | Excelente. O vetor é incluído no pacote, garantindo nitidez em qualquer escala. |
| PNG / JPG | Mínimo de 512 × 512 px | Aceitável. Imagens mais pequenas serão redimensionadas para cima e os ícones grandes podem perder nitidez. |
Se carregar uma imagem rasterizada (PNG ou JPG) abaixo do recomendado, a interface exibirá o aviso: "Origem pequena ({w} × {h} px): os ícones grandes podem perder nitidez. Imagens com 512 × 512 ou maiores — ou um ficheiro SVG — garantem os melhores resultados.".
Ajuste de imagens não quadradas e escolha do fundo
Os ícones de sistema são obrigatoriamente quadrados. Quando a imagem de origem não possui uma proporção de 1:1, o gerador oferece duas opções de enquadramento:
- Ajustar (com margem): A imagem inteira permanece visível, centralizada e com um espaçamento ao redor. Este é o comportamento padrão.
- Preencher (cortar): A imagem preenche todo o quadrado e as bordas excedentes são cortadas.
Transparência vs. Cor de Fundo
Por padrão, o gerador mantém o fundo transparente, o que funciona muito bem para os separadores dos navegadores. No entanto, os ecrãs principais de dispositivos iOS (iPhone e iPad) tendem a preencher áreas transparentes com a cor preta. Se antecipar que os utilizadores vão adicionar o seu site ao ecrã principal, é recomendável selecionar uma cor de fundo sólida através da opção "Cor de fundo" para garantir uma visualização correta.
Como instalar os ícones no seu site
Depois de configurar as opções de enquadramento e plano de fundo, clique em "Gerar ícones". O processo de conversão ocorre inteiramente no seu navegador e nenhum ficheiro é enviado para o BroBroGo, garantindo a privacidade dos seus dados.
Para implementar o pacote gerado no seu servidor, siga estes passos:
- Clique em "Descarregar ZIP" para obter o pacote completo de ficheiros.
- Extraia o conteúdo do ficheiro ZIP e coloque todos os ficheiros na pasta raiz do seu site (de modo a que o
favicon.icofique acessível diretamente em/favicon.ico). - Copie o código HTML gerado na ferramenta através do botão "Copiar código".
- Cole essas linhas de código dentro da tag
<head>de todas as páginas do seu site.
Perguntas Frequentes
Quais ficheiros estão incluídos no pacote de ícones?
Um ficheiro favicon.ico contendo versões de 16, 32 e 48 píxeis, ícones PNG em 16, 32, 180, 192 e 512 píxeis, além de um ficheiro site.webmanifest que lista os ícones maiores. Se começar com um SVG, o próprio vetor também será incluído. Um único ficheiro ZIP reúne tudo.
Qual deve ser o tamanho da minha imagem de origem?
Um ficheiro SVG é o ideal — cada ícone é renderizado a partir do vetor, mantendo a nitidez mesmo em 16 píxeis. Para PNG ou JPG, comece com pelo menos 512 × 512; imagens mais pequenas precisam de ser redimensionadas para cima e podem perder definição.
O fundo deve ser transparente ou colorido?
Ícones de separadores ficam ótimos com transparência. No entanto, os ecrãs principais do iPhone e iPad costumam preencher áreas transparentes com a cor preta — se os utilizadores puderem adicionar o seu site ao ecrã principal, recomendamos escolher uma cor de fundo.
O que acontece se a imagem não for quadrada?
Os ícones são quadrados, mas a sua imagem nunca será distorcida. Por padrão, ela é centralizada com um espaçamento ao redor; mude para "Preencher (cortar)" se preferir cortar as bordas excedentes.
Para onde vão os ficheiros no meu site?
Carregue-os para a pasta raiz do seu site, de modo a que o favicon.ico fique acessível em /favicon.ico, e depois cole as linhas geradas dentro da tag das suas páginas. Os navegadores escolherão o tamanho ideal automaticamente.