Gerador de favicon grátis

Origem

Espessura

Estilo

Formato

Prévia

16 px
32 px
48 px
180 px
192 px
512 px

Inclui favicon.ico (16, 32 e 48 px), PNGs em 16, 32, 180 (Apple), 192 e 512 (Android) e o site.webmanifest.

Código para colar no <head> do seu site

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Coloque os arquivos do ZIP na raiz do seu site e cole este código.

Tudo é gerado no seu navegador: seu logo nunca é enviado.

Como usar esta calculadora?

1. Escolha uma origem: uma ou duas letras (ou um emoji), ou o seu logo
2. Ajuste o formato, as cores e a margem interna acompanhando a prévia
3. Baixe o pacote ZIP com todos os tamanhos
4. Coloque os arquivos na raiz do seu site e cole o código HTML no <head>

Resposta rápida

Quais tamanhos de favicon são necessários?

Prepare um favicon.ico com 16, 32 e 48 px para os navegadores, um ícone Apple touch de 180 × 180 px para iPhone e iPad e PNG de 192 e 512 px para Android e apps instaláveis. Exemplo: coloque o pacote na raiz (seusite.com.br/favicon.ico) e cole as 5 linhas de código no <head>.

ArquivoTamanhoUsado por
favicon.ico16, 32, 48 pxAbas, favoritos, Google
favicon-32x32.png32 pxNavegadores recentes
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png (ícone)192 pxAndroid
android-chrome-512x512.png (ícone grande)512 pxTela de abertura, PWA

Sobre a ferramenta Gerador de favicon

O que é?

O gerador de favicon cria o pequeno ícone que aparece nas abas do navegador, nos favoritos e na tela inicial do celular. Comece a partir de uma inicial, uma sigla, um emoji ou o seu logo, ajuste o formato e as cores e baixe um pacote pronto para instalar.

Para que serve?

Um site sem favicon mostra um ícone genérico: parece menos profissional e é difícil de achar entre dezenas de abas. O Google também mostra o favicon ao lado do seu site nos resultados de busca no celular, o que ajuda a chamar a atenção e a passar confiança.

Como funciona?

Cada tamanho é desenhado diretamente na sua própria resolução (16, 32, 48, 180, 192 e 512 px) para ficar nítido, em vez de ser reduzido a partir de uma única imagem grande. O arquivo favicon.ico reúne os tamanhos 16, 32 e 48 px como imagens PNG internas, um formato que todo navegador reconhece. O ícone Apple é sempre um quadrado opaco, porque o iOS arredonda os cantos sozinho. Tudo é calculado no seu navegador.

Dicas de uso

  • Seja simples: em 16 px, uma ou duas letras grossas são muito mais legíveis que um logo detalhado
  • Escolha um contraste forte entre texto e fundo para o ícone ficar visível nos modos claro e escuro
  • Para um logo, parta de uma versão quadrada ou só do símbolo, sem o nome da marca
  • Limpe o cache ou teste em uma janela anônima se o favicon antigo continuar aparecendo depois de publicar
  • O Google pede um favicon quadrado de pelo menos 48 px, disponível no endereço indicado no código HTML
Incorpore esta ferramenta no seu siteGrátisCopie este código no seu site ou blog: a ferramenta aparece direto na sua página, grátis e sem cadastro.Todas as ferramentas incorporáveis

Ferramentas relacionadas