Favicon Generator
Gere favicon.ico e todos os tamanhos PNG que os navegadores, iOS e Android realmente precisam.
What is Favicon Generator?
Um favicon é o pequeno ícone exibido em uma aba do navegador, lista de favoritos e barra de endereços para representar um site, geralmente o logotipo minúsculo que aparece ao lado do título de uma página. Os navegadores modernos e plataformas móveis solicitam-no em vários formatos e tamanhos ao mesmo tempo: um favicon.ico clássico para abas de desktop, um apple-touch-icon PNG para telas iniciais do iOS e PNGs maiores declarados em um site.webmanifest para instalações do Android e PWA. O formato .ico em si é um pequeno contêiner que pode embalar vários tamanhos de imagem, comumente 16, 32 e 48 pixels, em um único arquivo. Enviar o conjunto completo em vez de apenas um favicon.ico garante que o ícone do site pareça nítido em todos os dispositivos e superfícies onde ele aparece.
How to Use Favicon Generator
- Arraste um logotipo ou imagem para a zona de soltar, ou clique nela para escolher um arquivo — uma imagem quadrada com um fundo transparente ou simples funciona melhor.
- A ferramenta gera um favicon.ico real (16, 32 e 48px combinados) mais PNGs individuais em todos os tamanhos que os navegadores modernos, iOS e Android realmente solicitam.
- Baixe cada arquivo individualmente, ou clique em "Baixar tudo como .zip" para obter todos os arquivos em um arquivo compactado.
- Coloque os arquivos na pasta raiz (ou pública) do seu site, então copie o snippet HTML para a tag <head> da sua página e o JSON site.webmanifest para um arquivo com esse nome ao lado deles.
Examples
Logotipo quadrado
Input: Logotipo PNG de 512×512
Output: favicon.ico + 5 tamanhos PNG, sem preenchimento
Imagem não quadrada
Input: Banner amplo de 1200×630
Output: Mesmos 6 arquivos, cada um centralizado com preenchimento transparente para permanecer quadrado
Common Mistakes
- Apenas fazer o upload do favicon.ico e esquecer os PNGs apple-touch-icon/android-chrome, deixando os ícones da tela inicial com aparência errada no celular.
- Fazer o upload de uma imagem de origem de baixa resolução — o ícone de 512×512 terá aparência suave ou pixelada se a original for menor que isso.
- Esquecer de realmente adicionar as tags <link> à <head> da página — os arquivos existentes no seu projeto não fazem nada até que uma página os referencie.
- Colocar os arquivos gerados no diretório errado — eles precisam ser servidos a partir da raiz do seu site (por exemplo, yoursite.com/favicon.ico), a menos que você atualize os caminhos no snippet para corresponder a onde você os colocou.
Why Use This Tool
- Gera um contêiner .ico real e correto, não apenas um PNG renomeado.
- Cobre todos os tamanhos que os navegadores modernos, iOS e Android realmente solicitam, não apenas o favicon clássico de 16×16.
- Fontes não quadradas são centralizadas com preenchimento transparente em vez de serem distorcidas.
- Snippet de HTML <head> pronto para colar e JSON do site.webmanifest incluído — sem precisar adivinhar a marcação correta.
- Um clique em "Baixar tudo como .zip" embala todos os arquivos em vez de clicar em Baixar seis vezes separadamente.