Nouplo

Gerador de favicon

Entra uma imagem; saem favicon.ico, apple-touch-icon, ícones do manifesto e as tags para colar.

Solte os arquivos aqui

ou clique para escolher no seu dispositivoFormatos aceitos: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG

Até 3 arquivos por vezAté 20 MB por arquivo10 usos por diaRemova os limites com o Pro✓ Funciona offline

Seus arquivos ficam no seu dispositivo

Esta ferramenta roda inteiramente no seu navegador. Nada é enviado, nada é armazenado, e você pode até desligar a internet antes de começar.

Como funciona

  1. Adicione seu logo: de preferência um SVG quadrado; se não tiver, um PNG ou JPG de pelo menos 512 × 512 px.
  2. Escolha como ele fica no quadrado — a imagem inteira com margem opcional, ou preenchendo o quadrado — e também o formato e o fundo.
  3. Toque em “Gerar favicons” e baixe tudo de uma vez em um ZIP.
  4. Coloque os arquivos na raiz do seu site e cole as tags de favicon-tags.html no <head> das páginas.

Perguntas frequentes

Quais arquivos eu recebo, e para que serve cada um?
favicon.ico reúne 16, 32 e 48 px em um arquivo só, para navegadores e robôs que pedem /favicon.ico direto. favicon-96x96.png é para os resultados de busca, onde o Google quer um múltiplo de 48 px. apple-touch-icon.png (180 px) é o ícone da tela de início do iPhone e do iPad. Os dois PNG web-app-manifest e o site.webmanifest são para Android e web apps instalados. Partindo de um SVG, você recebe também favicon.svg, e favicon-tags.html traz as linhas para colar no <head>.
Escolhi fundo transparente. Por que o apple-touch-icon não é transparente?
Porque o iOS não mostra transparência na tela de início: ele pinta de preto os pixels transparentes e arredonda os cantos por conta própria. Por isso esse arquivo é sempre um quadrado cheio e opaco, com o fundo que você escolheu ou em branco. Os outros ícones continuam transparentes.
É melhor partir de um SVG ou de um PNG?
De um SVG, se você tiver. Cada tamanho é desenhado a partir do vetor: o ícone de 16 px é desenhado em 16 px, e não reduzido de uma imagem grande, e você ainda recebe o favicon.svg, que os navegadores modernos preferem. Com PNG ou JPG, use pelo menos 512 × 512 px; um logo cheio de detalhes não sobrevive a 16 px de qualquer jeito, e para isso servem a margem e um símbolo mais simples.
Por que o Google mostra um globo em vez do meu ícone?
O Google precisa conseguir rastrear o ícone e a página inicial que aponta para ele, e o ícone deve ser quadrado, com lado múltiplo de 48 px — o arquivo de 96 px daqui é feito para isso. Depois que os arquivos estão no ar, os resultados de busca podem levar dias ou semanas para mudar.
Meu logo é enviado para algum lugar?
Não. Cada arquivo é desenhado nesta página com o canvas do seu navegador, e o ZIP também é montado aqui. Nada é enviado a um servidor.

Ferramentas relacionadas

• Redimensionar imagem Ajuste uma ou várias imagens para medidas exatas, ou escolha um tamanho pronto de rede social. ◩ Remover fundo de foto O que está em primeiro plano recortado automaticamente, cabelo incluído, sem a foto sair do seu aparelho. ⇄ Converter imagem Um conversor para todos os formatos comuns, incluindo o HEIC do iPhone e o SVG, sem sair do navegador. • Cortar imagem Arraste uma moldura sobre a foto, veja exatamente o que vai ficar e corte sem enviá-la para lugar nenhum.