Gerador de favicon grátis

Origem

Espessura

Estilo

Forma

Pré-visualização

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

Inclui favicon.ico (16, 32 e 48 px), os PNG de 16, 32, 180 (Apple), 192 e 512 (Android) e 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 ficheiros do ZIP na raiz do seu site e depois cole este código.

Tudo é gerado no seu navegador: o seu logótipo não é enviado para lado nenhum.

Como utilizar esta calculadora?

1. Escolha uma origem: uma ou duas letras (ou um emoji), ou o seu logótipo
2. Ajuste a forma, as cores e a margem olhando para a pré-visualização
3. Transfira o pacote ZIP com todos os tamanhos
4. Coloque os ficheiros na raiz do site e cole o código HTML no <head>

Resposta rápida

Que tamanhos de favicon são precisos?

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

FicheiroTamanhoUsado por
favicon.ico16, 32, 48 pxSeparadores, marcadores, Google
favicon-32x32.png32 pxNavegadores recentes
apple-touch-icon.png180 pxiPhone, iPad
android-chrome-192x192.png192 pxAndroid
android-chrome-512x512.png512 pxEcrã inicial, PWA

Sobre a ferramenta Gerador de favicon

O que é?

O gerador de favicon cria o pequeno ícone que aparece no separador do navegador, nos marcadores e no ecrã principal dos telemóveis. Parta de uma inicial, de uma sigla, de um emoji ou do seu logótipo, ajuste a forma e as cores e transfira um pacote pronto a instalar.

Para que serve?

Um site sem favicon mostra um ícone genérico: parece menos profissional e é difícil de encontrar entre dezenas de separadores. A Google também mostra o favicon ao lado do seu site nos resultados de pesquisa no telemóvel, o que ajuda a chamar a atenção e a inspirar confiança.

Como funciona?

Cada tamanho é desenhado diretamente na sua resolução (16, 32, 48, 180, 192 e 512 px) para ficar nítido, em vez de ser reduzido a partir de uma imagem grande. O ficheiro favicon.ico agrupa os tamanhos de 16, 32 e 48 px com imagens PNG lá dentro, um formato reconhecido por todos os navegadores. O ícone Apple é sempre um quadrado opaco, porque o iOS arredonda os cantos sozinho. Tudo é calculado no seu navegador.

Dicas de utilização

  • Mantenha-o simples: a 16 px, uma ou duas letras em negrito leem-se muito melhor do que um logótipo detalhado
  • Escolha um contraste forte entre o texto e o fundo para que o ícone se veja no modo claro e no modo escuro
  • Para um logótipo, parta de uma versão quadrada ou só do símbolo, sem o nome da marca
  • Limpe a cache ou teste numa janela privada se o favicon antigo ainda aparecer depois de publicar
  • A Google pede um favicon quadrado com pelo menos 48 px, acessível no endereço indicado no código HTML
Incorpore esta ferramenta no seu siteGrátisCopie este código para o seu site ou blogue: a ferramenta aparece diretamente na sua página, grátis e sem registo.Todas as ferramentas incorporáveis

Ferramentas relacionadas