Gerador de favicon

Um favicon (abreviação de 'favorite icon' ou ícone favorito) é o pequeno ícone quadrado que o navegador mostra ao lado do título de uma página — na aba do navegador, na barra de favoritos, no histórico e às vezes nos resultados de busca. Normalmente aparece em 16×16 ou 32×32 pixels e fica na raiz do seu site como favicon.ico. Sites modernos também adicionam um favicon.svg, um Apple touch icon e ícones PWA para telas iniciais. Um favicon reconhecível melhora as taxas de clique em favoritos e resultados de busca.

Comece com 16×16 e 32×32 — os dois tamanhos que os navegadores mostram em abas e favoritos — agrupados em um único favicon.ico. Para cobertura completa, 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 telas iniciais PWA. Este gerador produz todos esses tamanhos de uma vez a partir de uma única fonte, então você nunca precisa redimensionar manualmente ou usar múltiplas ferramentas.

Escolha uma fonte — faça upload de uma imagem (PNG, JPG, SVG ou WebP), digite 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 em um canvas, empacota 16/32/48 em um favicon.ico, e entrega um ZIP com todos os arquivos mais o trecho HTML para colar no seu <code>&lt;head&gt;</code>. Todo o processo leva menos de um minuto e não precisa de software de design.

Sim — porque nada é realmente enviado. Cada etapa roda no seu navegador usando um <code>&lt;canvas&gt;</code> HTML e JavaScript: sua imagem é lida localmente, redimensionada, codificada em PNG e ICO, e zipada no seu dispositivo. Nenhum arquivo é enviado para um servidor, ao contrário de ferramentas como favicon.io e RealFaviconGenerator.net que processam sua imagem na nuvem. Seu logo nunca sai do seu computador — importante se você estiver trabalhando em um projeto de cliente ou em um produto ainda não lançado.

Quase sempre é o cache do navegador. Navegadores fazem cache de favicons de forma agressiva, então faça um recarregamento forçado (Ctrl+F5), abra a URL do ícone diretamente (seusite.com/favicon.ico) para confirmar que carrega, ou tente em uma janela anônima. Também verifique se os arquivos estão na raiz do seu site, se os caminhos nas suas tags <code>&lt;link&gt;</code> estão corretos (uma barra inicial importa), e se você fez upload de todos os tamanhos. Novos favicons podem demorar um tempo para atualizar em favoritos e resultados de busca — aguarde algumas horas após publicar.

Sim — a API canvas e o download de arquivos funcionam no Safari do iOS, Chrome para Android e Samsung Internet. Você pode fazer upload de uma foto do seu rolo de câmera, digitar uma letra, ou colar um emoji, e depois baixar o ZIP completo diretamente no seu celular. É útil para prototipar rapidamente um favicon quando você está longe do computador. O layout se adapta a telas pequenas, então a ferramenta é confortável de usar em 375px.

Ícones maskable (PNGs de 192×192 e 512×512 listados no site.webmanifest) são os que o Android e os PWAs instalados usam. Um ícone maskable mantém seu conteúdo importante dentro de uma zona segura central — cerca de 80% do ícone — para que continue com boa aparência quando o sistema o corta em círculo, squircle ou quadrado arredondado. Este gerador adiciona automaticamente esse preenchimento de zona segura aos ícones de 192 e 512 e os marca com <code>purpose: maskable</code>. Você não precisa calcular manualmente a área segura.