Gerador de favicons

Um favicon (abreviatura de 'favorite icon' ou ícone favorito) é o pequeno ícone quadrado que o navegador mostra junto ao título de uma página — no separador do navegador, na barra de marcadores, no histórico e por vezes nos resultados de pesquisa. Normalmente é mostrado a 16×16 ou 32×32 píxeis e encontra-se na raiz do seu site como favicon.ico. Os sites modernos também adicionam um favicon.svg, um Apple touch icon e ícones PWA para ecrãs iniciais. Um favicon reconhecível melhora as taxas de clique em marcadores e resultados de pesquisa.

Comece com 16×16 e 32×32 — os dois tamanhos que os navegadores mostram em separadores e marcadores — agrupados num único favicon.ico. Para cobertura total, adicione também 48×48 (usado pelo Windows), um apple-touch-icon de 180×180 para iOS, e PNGs de 192×192 e 512×512 para Android e ecrãs iniciais PWA. Este gerador produz todos esses tamanhos de uma vez a partir de uma única fonte, pelo que nunca precisa de redimensionar manualmente nem de usar múltiplas ferramentas.

Escolha uma fonte — carregue uma imagem (PNG, JPG, SVG ou WebP), escreva uma a três letras, ou cole um emoji — depois escolha uma cor de fundo, forma (quadrado, arredondado ou círculo) e preenchimento. A ferramenta renderiza todos os tamanhos de favicon num canvas, empacota 16/32/48 num favicon.ico, e entrega-lhe um ZIP com todos os ficheiros mais o fragmento HTML para colar no seu <code>&lt;head&gt;</code>. Todo o processo demora menos de um minuto e não requer software de design.

Sim — porque nada é realmente carregado. Cada passo é executado no seu navegador usando um <code>&lt;canvas&gt;</code> HTML e JavaScript: a sua imagem é lida localmente, redimensionada, codificada em PNG e ICO, e comprimida em ZIP no seu dispositivo. Nenhum ficheiro é alguma vez enviado para um servidor, ao contrário de ferramentas como favicon.io e RealFaviconGenerator.net que processam a sua imagem na nuvem. O seu logótipo nunca sai do seu computador — importante se estiver a trabalhar num projecto de cliente ou num produto ainda não publicado.

Quase sempre é a cache do navegador. Os navegadores fazem cache dos favicons de forma agressiva, por isso faça uma recarga forçada (Ctrl+F5), abra o URL do ícone directamente (seusito.com/favicon.ico) para confirmar que carrega, ou tente numa janela privada. Também verifique se os ficheiros estão na raiz do seu site, se os caminhos nas suas tags <code>&lt;link&gt;</code> estão correctos (uma barra inicial é importante), e se carregou todos os tamanhos. Os novos favicons podem demorar algum tempo a actualizar nos marcadores e resultados de pesquisa — aguarde algumas horas após publicar.

Sim — a API canvas e o descarregamento de ficheiros funcionam no Safari do iOS, Chrome para Android e Samsung Internet. Pode carregar uma foto do seu rolo de câmara, escrever uma letra, ou colar um emoji, e depois descarregar o ZIP completo directamente para o seu telemóvel. É útil para prototipar rapidamente um favicon quando está longe da secretária. O layout adapta-se a ecrãs pequenos, pelo que a ferramenta é confortável de usar a 375px.

Os ícones maskable (PNGs de 192×192 e 512×512 listados em site.webmanifest) são os que o Android e as PWA instaladas utilizam. Um ícone maskable mantém o seu conteúdo importante dentro de uma zona segura central — aproximadamente 80% do ícone — para que continue a ter bom aspecto quando o sistema o recorta em círculo, squircle ou quadrado arredondado. Este gerador adiciona automaticamente esse preenchimento de zona segura aos ícones de 192 e 512 e marca-os com <code>purpose: maskable</code>. Não precisa de calcular manualmente a área segura.