Importe uma imagem e gere um pacote completo de favicon — ICO, PNG, Apple Touch Icon, ícones Android Chrome, site.webmanifest e código HTML pronto para copiar. Tudo no seu navegador.
🎨
Solte seu logo ou ícone aqui
ou clique para navegar · JPG, PNG, WebP, SVG · Imagem quadrada recomendada
O que é um Favicon?
Um favicon é o pequeno ícone exibido nas abas do navegador, favoritos, histórico e telas iniciais de dispositivos móveis. Ele ajuda os usuários a identificar seu site de relance. Sites modernos necessitam de vários tamanhos e formatos de favicon para exibição ideal em todos os navegadores, sistemas operacionais e dispositivos.
Arquivos Completos de Favicon Explicados
favicon.ico — Um arquivo ICO multi-tamanho contendo ícones de 16x16, 32x32 e 48x48 pixels. Necessário para compatibilidade com navegadores antigos e ícones da barra de tarefas do Windows.
favicon-16x16.png et favicon-32x32.png — Favicons PNG padrão usados por navegadores modernos para barras de favoritos e abas do navegador.
apple-touch-icon.png — Um PNG de 180x180 pixels usado pelo iOS Safari quando os usuários adicionam seu site à tela inicial.
android-chrome-192x192.png et android-chrome-512x512.png — Ícones PNG usados pelo Android Chrome para atalhos na tela inicial e telas de splash PWA.
site.webmanifest — Um arquivo JSON que informa aos navegadores informações sobre sua aplicação web, incluindo os caminhos dos ícones, a cor do tema e o modo de exibição.
Como Adicionar Favicons ao Seu Site
1. Baixe o ZIP e extraia todos os arquivos no diretório raiz do seu site. 2. Copie o trecho de código HTML e cole na seção <head> de cada página. 3. Publique seu site e verifique olhando o ícone na aba do navegador. A maioria dos navegadores também detecta automaticamente favicon.ico no diretório raiz.
Imagem Fonte Recomendada
Para melhores resultados, use uma imagem quadrada de pelo menos 512x512 pixels. O formato PNG com fundo transparente é ideal. Designs simples com formas ousadas e alto contraste são os mais bem-sucedidos — fotos complexas ficam irreconhecíveis em tamanhos pequenos como 16x16.
Perguntas Frequentes
Quais arquivos estão incluídos em um pacote completo de favicon?▸
Um pacote completo inclui favicon.ico (multi-tamanho para navegadores antigos), favicon-16x16.png e favicon-32x32.png para navegadores modernos, apple-touch-icon.png (180x180) para iOS, android-chrome-192x192.png e android-chrome-512x512.png para Android, e site.webmanifest para suporte PWA — 7 arquivos no total.
O que é apple-touch-icon.png?▸
É uma imagem PNG de 180x180 pixels usada pelo iOS Safari quando um usuário adiciona seu site à tela inicial. Sem ele, o iOS faz uma captura de tela da sua página. Coloque-o no diretório raiz do seu site e referencie-o com uma tag link no head do seu HTML.
O que é site.webmanifest?▸
site.webmanifest é um arquivo JSON que fornece metadados sobre sua aplicação web ao navegador. Ele define os caminhos dos ícones, as cores do tema e o modo de exibição para Aplicativos Web Progressivos (PWAs). Os navegadores o utilizam para configurar o ícone da tela inicial e a tela de splash em dispositivos Android.
Qual código HTML é necessário para os favicons?▸
Você precisa de quatro tags link no head do seu HTML: uma para apple-touch-icon (180x180), uma para favicon-32x32.png, uma para favicon-16x16.png e uma para o manifesto web. Nossa ferramenta gera o trecho HTML exato que você pode copiar e colar diretamente.
Qual é o melhor tamanho de imagem fonte para um favicon?▸
Use uma imagem quadrada de pelo menos 512x512 pixels. O PNG com fundo transparente funciona melhor. Designs simples com formas ousadas e alto contraste ficam bem em tamanhos pequenos. Evite fotos ou ilustrações complexas, pois ficam irreconhecíveis em 16x16 pixels.
Preciso de ICO e PNG para os favicons?▸
Sim, para máxima compatibilidade. O formato ICO é necessário para navegadores antigos, Internet Explorer e a barra de tarefas do Windows. Os favicons PNG são usados por navegadores modernos como Chrome, Firefox e Safari. Incluir ambos garante que seu favicon seja exibido corretamente em todos os lugares.
Este gerador de favicon é gratuito?▸
Sim, totalmente gratuito sem limites, sem marcas d'água e sem necessidade de registro. Todo o processamento é feito inteiramente no seu navegador. Suas imagens nunca são enviadas a um servidor, garantindo total privacidade e resultados instantâneos.
Posso usar uma fotografia como favicon?▸
Tecnicamente sim, mas ícones simples e logos funcionam muito melhor. As fotografias perdem seus detalhes quando reduzidas para 16x16 ou 32x32 pixels e ficam difíceis de reconhecer. Para melhores resultados, use um gráfico simples com formas ousadas, mínimo de detalhes e cores de alto contraste.