Todo projeto sério precisa de um favicon claro nas abas do navegador, um ícone Apple touch para iOS e ícones de app para Android e PWA. Esta ferramenta ajuda a gerar tudo a partir de uma imagem: envie um logo quadrado, escolha os tamanhos, baixe os PNG e copie o snippet HTML para o seu site.
Por que favicon e ícones de app importam
- Favicon — o ícone pequeno na aba do navegador e nos favoritos. Sem ele, a aba fica genérica e sua marca é menos reconhecida.
- Ícone Apple touch — usado quando o usuário adiciona seu site à tela inicial no iPhone e iPad. O tamanho certo (ex.: 180×180) garante um ícone nítido.
- Ícones PWA / Android — necessários para “Adicionar à tela inicial” e instalação. Tamanhos típicos: 192×192 e 512×512.
Uma única imagem quadrada pode atender a todos. O gerador roda inteiramente no navegador: seu logo não sai do seu dispositivo.
Imagem de origem recomendada
Use uma imagem quadrada (PNG ou SVG) com pelo menos 512×512 pixels. Resolução maior é ok; a ferramenta redimensiona. Evite imagens muito pequenas ou distorcidas para os ícones ficarem nítidos em telas de alta densidade.
Início rápido com a ferramenta
- Enviar — Clique em “Escolher arquivo” e selecione seu logo (PNG ou SVG, quadrado, 512×512 ou maior).
- Fundo — Escolha a cor de fundo se seu logo tiver transparência; ela também vira
theme-colorno snippet. - Tamanhos — Marque os tamanhos que precisa (favicon 16/32, Apple 180, PWA 192/512, etc.).
- Baixar — Clique em qualquer prévia para baixar esse tamanho em PNG, ou “Baixar tudo em ZIP” para obter todos de uma vez.
- Snippet — Copie o bloco HTML e cole no
<head>do seu site. Envie os PNG para o servidor (ex.:/assets/icons/) e ajuste os caminhos no snippet se necessário.
Onde colocar os arquivos
Um setup comum:
- Coloque os PNG de favicon e ícones em uma pasta como
/assets/icons/ou na raiz. - Atualize o snippet para os
hrefapontarem para esses caminhos (ex.:/assets/icons/favicon-32x32.png). - Adicione
site.webmanifestpara PWA com os mesmos caminhos para os ícones 192×192 e 512×512.
Resumo
O gerador de favicon e ícones de app permite ir de um logo a todos os tamanhos necessários e um snippet pronto para colar no <head>. Use uma imagem quadrada em boa resolução, baixe os PNG e encaixe o snippet no seu projeto.