Pular para o conteúdo
FlexiConvert

Gerador de favicon

Todos os ícones do seu site a partir do seu logotipo, prontos para subir.

Outras ferramentas: JPEG para JPG Comprimir JPG Comprimir PNG Comprimir WebP Redimensionar imagem Recortar imagem Juntar imagens

Um arquivo por vez, de até 20 MB.

Ajustar ao quadrado

Os ícones são quadrados. Se sua imagem não for, escolha se ela aparece inteira (com margens transparentes) ou se preenche o quadrado.

Para o ícone da Apple, que não pode ser transparente, e como cor do tema no Android.

Seus arquivos são apagados automaticamente depois da conversão e, no máximo, uma hora depois do envio. Como tratamos seus arquivos

Crie o favicon completo do seu site a partir do seu logotipo: o ícone da aba do navegador, os da tela de início do iPhone e do Android, o manifesto e o código HTML para ligar tudo. Envie uma imagem PNG, JPG, WebP ou SVG e baixe um ZIP com tudo, sem cadastro e sem marca d’água.

Como criar um favicon

  1. Selecione seu logotipo ou ícone em PNG, JPG, WebP ou SVG, de preferência quadrado e com pelo menos 512 pixels.
  2. Escolha se a imagem aparece inteira ou preenche o quadrado, e a cor de fundo do ícone da Apple.
  3. Clique em “Criar favicon” e baixe o ZIP.
  4. Coloque os arquivos na raiz do seu site e cole o código do head.html na tag head das suas páginas.

O que vem no pacote

Arquivo Para que serve
favicon.ico O ícone clássico da aba, com os tamanhos 16, 32 e 48 pixels num só arquivo. Os navegadores procuram por ele mesmo que você não o ligue.
favicon-16x16.png e favicon-32x32.png Os ícones da aba e dos favoritos nos navegadores atuais.
apple-touch-icon.png O ícone de 180 pixels que o iPhone e o iPad usam quando alguém adiciona seu site à tela de início.
android-chrome-192x192.png e android-chrome-512x512.png Os ícones do Android e dos aplicativos web instaláveis.
site.webmanifest O manifesto que declara os ícones do Android e a cor do seu site.
head.html As tags para ligar os ícones nas suas páginas.

Como instalar no seu site

  1. Descompacte o ZIP e coloque todos os arquivos, menos o head.html, na raiz do seu site (onde fica a página inicial).
  2. Copie estas tags, que também estão no head.html, para a tag head das suas páginas:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
  1. Se quiser, coloque o nome do seu site em name e short_name no site.webmanifest.

Os navegadores guardam o favicon em cache: se não vir o novo na hora, recarregue a página forçando a atualização ou espere um pouco.

Encaixar ou preencher

Todos os ícones são quadrados. Se sua imagem não for, você pode encaixá-la, para aparecer inteira com margens transparentes, ou preencher o quadrado, cortando o que sobra nas laterais. Para um logotipo horizontal com texto, muitas vezes é melhor usar só o símbolo do logotipo, recortado em quadrado.

O ícone da Apple não pode ser transparente: o iOS preencheria o fundo de preto. Por isso o criamos com a cor de fundo que você escolher, usada também como cor do seu site no Android. Os outros ícones mantêm a transparência.

Dicas para um bom resultado

  • Parta de uma imagem grande, de pelo menos 512 × 512 pixels, ou melhor ainda de um SVG: os ícones pequenos são calculados a partir dela.
  • Simplifique: em 16 pixels, textos e detalhes finos não se leem. Um símbolo ou uma inicial com cores contrastantes funciona bem melhor.

Se você só precisa do arquivo .ico, pode converter seu PNG para ICO.

Limites

  • Uma imagem por vez, de até 20 MB e 100 megapixels.
  • Não mexemos no seu site: você mesmo precisa subir os arquivos e adicionar as tags, ou pedir a quem cuida dele.

Perguntas frequentes

De que tamanho deve ser a imagem para criar um favicon?

Quanto maior, melhor: pelo menos 512 × 512 pixels, ou um SVG. Todos os ícones, de 512 a 16 pixels, são calculados a partir dela.

Onde coloco os arquivos do favicon?

Na raiz do seu site, na mesma pasta da página inicial. Depois, cole as tags do head.html na tag head das suas páginas.

Por que não vejo o novo favicon no meu navegador?

Porque os navegadores guardam o favicon em cache. Recarregue a página forçando a atualização, abra numa janela anônima ou espere um pouco.

Por que o ícone da Apple tem fundo colorido?

Porque o iOS não aceita transparência nos ícones da tela de início e preencheria o fundo de preto. Criamos com a cor de fundo que você escolher para ficar bonito.

Posso criar o favicon do meu site no WordPress?

O WordPress tem sua própria opção, o “Ícone do site” (em Aparência › Personalizar › Identidade do site ou, conforme a versão e o tema, nas configurações gerais): você envia uma imagem quadrada e ele cria os tamanhos. O pacote desta ferramenta é para sites em que você pode subir arquivos e editar o código.

Converta também seus arquivos PNG, JPG, WebP ou SVG