Gerador de favicon
Arraste seu logo para o gerador de favicon e receba o kit completo de arquivos, do ícone de 16 pixels da aba do navegador ao ícone de app de 512 pixels, além do HTML para colar no seu site. Tudo acontece no seu navegador, então sua imagem nunca é enviada.
Qwyzzle
Summit Roasters
Fox EsportsArraste seu logo até aqui
PNG, JPG, WebP ou SVG. Quadrado funciona melhor, com 512 px ou mais.
Feito no seu navegador. Sua imagem nunca é enviada.
O que é um favicon e onde ele aparece
O favicon é o pequeno ícone quadrado que representa o seu site. O nome é uma abreviação de “favorite icon”, ou ícone de favorito: o primeiro navegador a exibir um favicon o colocava ao lado dos sites salvos, que ele chamava de Favoritos.
Você o vê nas abas do navegador, ao lado do título da página, com 16 pixels de largura, ou 32 numa tela mais nítida. Ele também identifica o seu site nos favoritos e no histórico. Quando alguém salva o seu site na tela inicial do celular, ele vira um ícone de app. E o Google o mostra ao lado do nome do seu site nos resultados de busca.
Em todos esses lugares, a função dele é a mesma: ser reconhecido num relance no meio de outros ícones.
Por que um favicon vira um conjunto de arquivos
Cada um desses lugares surgiu numa época diferente e pede o seu próprio arquivo. O gerador de favicon acima cria todos eles a partir de uma única imagem.
Abas, favoritos e histórico usam o favicon.ico, um único arquivo com versões de 16, 32 e 48 pixels dentro. É o formato mais antigo: quando uma página não indica nenhum ícone, os navegadores ainda procuram o favicon.ico na pasta raiz do site.
Se você começar com um SVG, também recebe o favicon.svg, que os navegadores capazes de exibir ícones SVG usam no lugar do ICO. Como é feito de formas, e não de pixels, ele fica nítido em qualquer tela.
iPhones e iPads usam o apple-touch-icon.png, de 180 por 180 pixels, quando alguém adiciona o seu site à tela inicial. O iPhone preenche as áreas transparentes com preto, então esse ícone sempre ganha um fundo sólido: a sua cor, ou branco se você escolheu transparente.
Celulares Android, e sites instalados como app pelo navegador, usam o icon-192.png e o icon-512.png. Eles chegam a esses arquivos pelo site.webmanifest, um pequeno arquivo de texto que informa aos navegadores o nome do seu site, se você digitou um na ferramenta, e onde estão os ícones maiores.
Os PNGs avulsos de 16 a 48 pixels são reservas para serviços que pedem um PNG. Para os resultados de busca, o Google lê os links de ícone no HTML da sua página inicial.
Como adicionar os arquivos de favicon ao seu site
Se você, ou quem cuida do seu site, edita os arquivos dele, são dois passos.
Primeiro, descompacte o download e coloque os arquivos na pasta raiz do seu site, a pasta principal, onde fica a página inicial. Para conferir, acrescente /favicon.ico ao endereço do seu site: o ícone deve abrir.
Depois, cole as linhas de HTML do README (a ferramenta também mostra essas linhas) no head das suas páginas: a seção no topo do HTML que guarda o título da página. Há uma linha para o arquivo ICO, uma para o ícone Apple Touch e uma para o manifesto, além de uma para o SVG, se você tiver um.
Normalmente todas as páginas usam o mesmo modelo de página, então você só cola as linhas uma vez. Antes, apague as linhas de ícone antigas, senão os navegadores podem continuar usando o ícone antigo.
Num criador de sites, dá para pular os dois passos: envie o icon-512.png na configuração de ícone do site, e a própria plataforma adiciona o HTML para você.
Como fazer um logo funcionar em 16 pixels
Em 16 por 16 pixels, o seu ícone inteiro tem 256 quadradinhos de cor. A maioria dos logos não foi desenhada para isso.
Comece pelo símbolo, não pelo nome: se você espremer um nome de oito letras em 16 pixels, cada letra fica com dois pixels de largura. Não tem símbolo? Use a primeira letra, grande e em negrito. Letras grossas aguentam a redução muito melhor do que as finas.
Depois, tire detalhes. Linhas muito finas e espaços pequenos se misturam com o que está em volta, e um slogan vira um borrão.
O que conta é o claro contra o escuro, não as cores em si. As abas são claras ou escuras dependendo do tema, e um ícone azul-marinho some numa barra de abas escura. Se o seu logo é escuro, dê a ele um fundo claro na ferramenta, ou faça o contrário.
A margem, o espaço entre o logo e a borda do quadrado, é uma questão de equilíbrio. Margem demais, e o logo encolhe na aba. Margem de menos, e o iPhone, que arredonda os ícones da tela inicial, corta os cantos do logo.
Por fim, confira as prévias das abas clara e escura acima no tamanho real, sem dar zoom. Nosso verificador de logo grátis vai além: ele reduz o seu logo a 32 pixels e mede quanto dos detalhes sobrevive.
Quando redesenhar o logo em vez de só reduzir
Às vezes não tem jeito. Numa ilustração detalhada ou num visual 3D feito de sombras, o detalhe é o design, e em 16 pixels ele some. Esta ferramenta consegue redimensionar o seu logo, mas não redesenhá-lo.
Isso não faz dele um logo ruim, só um logo feito para lugares maiores. Desenhe uma versão pequena de propósito: um símbolo simplificado, ou a sua inicial na fonte da sua marca. Mantenha as cores e algo da forma, e as pessoas vão ligar uma coisa à outra. Entre uma inicial clara e uma miniatura borrada, ficamos sempre com a inicial.
Precisa de um logo novo? Nosso gerador de logo com IA cria um a partir do nome da sua marca, com uma descrição curta se você quiser. Os logos dos nossos modelos de logo vêm com o símbolo em um arquivo separado quando têm um, e todo logo que você compra conosco inclui os arquivos de favicon.
Dúvidas sobre favicon
É grátis, sem cadastro e sem marca d’água. E a sua imagem fica com você: a ferramenta funciona inteiramente no seu navegador. Ela gera todos os tamanhos e o zip no seu próprio dispositivo, e a imagem nunca é enviada para os nossos servidores. Por isso, dá para usar até com um logo que você ainda não mostrou para ninguém.
Quadrada, com pelo menos 512 pixels de cada lado. O maior ícone do kit tem 512 pixels, então um PNG, JPG ou WebP menor precisa ser esticado para preenchê-lo, e os ícones grandes ficam borrados. A ferramenta avisa quando isso acontece. Um SVG não tem esse limite: ele é feito de formas, não de pixels, então fica nítido em qualquer tamanho. Um logo largo só preenche uma faixa fina do quadrado, então comece pelo seu símbolo ou pela sua inicial.
O ideal é ter os três, porque navegadores e celulares diferentes pedem arquivos diferentes, e o HTML da ferramenta diz a cada um qual arquivo usar. O arquivo ICO é o que todo navegador entende. Os PNGs são para celulares e apps instalados, com reservas nos tamanhos pequenos. O SVG, que você recebe quando começa com um SVG, fica nítido em qualquer tela nos navegadores compatíveis.
O mais provável é que o seu navegador esteja mostrando uma cópia salva. Os navegadores guardam os favicons por muito mais tempo do que o resto da página, então o ícone antigo pode continuar aparecendo mesmo com os arquivos novos já no ar. Tente uma atualização forçada, que recarrega a página sem os arquivos salvos: Ctrl+Shift+R no Windows, Cmd+Shift+R no Mac (Option+Cmd+R no Safari). Se não resolver, abra o endereço do seu site com /favicon.ico no final e atualize essa página, ou confira numa janela anônima. Os navegadores das outras pessoas se atualizam com o tempo.
Nas configurações do criador de sites, e não numa pasta. A maioria dos criadores de sites e das plataformas de loja virtual tem uma configuração de ícone do site ou de favicon, onde você envia um PNG quadrado. Escolha o icon-512.png, o maior arquivo do zip, para a plataforma ter bastante material ao gerar os tamanhos menores. Se a configuração pedir um tamanho específico, use o arquivo correspondente. Essas plataformas adicionam o HTML para você, então pode ignorar o README.
O Google pega um favicon novo quando o rastreador dele, o programa que lê as páginas da web para o Google, visita de novo a sua página inicial. Não existe um prazo fixo para isso. O Google quer uma imagem quadrada e o link do ícone no HTML da sua página inicial, então confira se os dois estão no lugar. Depois disso, o que aparece e quando é decisão do Google, então tenha um pouco de paciência.
Ainda não tem logo? Crie o seu.
Use o nosso gerador de logo com IA ou um modelo no criador de logo. Todo logo que você baixa do DepthLogo já vem com os favicons.