Otimizar

Gerador de favicon

Transforme um logo, uma imagem ou algumas letras em todos os ícones que um site precisa: aba do navegador, favoritos, telas iniciais de iPhone e Android, com o HTML para adicioná-los.

Pré-visualizado e depois verificado

Veja o ícone em abas claras e escuras e nas telas iniciais dos celulares antes de baixar. Cada arquivo é lido de novo e verificado antes.

Como funciona

Crie, confira, baixe

Comece com uma imagem ou letras. Adicione um logo (de preferência SVG ou um PNG de 512 pixels ou mais) ou digite até três letras.
Dê forma. Quadrado, arredondado ou círculo, fundo transparente ou colorido, e espaço em volta.
Confira as pré-visualizações. Abas no modo claro e escuro, os tamanhos reais de 16, 32 e 48 pixels e as telas iniciais de iPhone e Android.
Baixe e adicione. Baixe o ZIP, envie os arquivos para o seu site e cole o HTML no <head> de cada página.

O que você recebe

Os arquivos e para que serve cada um

favicon.ico com imagens de 16, 32 e 48 pixels: o ícone clássico que todo navegador procura.
favicon-16x16.png e favicon-32x32.png para abas e favoritos.
apple-touch-icon.png (180 pixels, nunca transparente) para as telas iniciais de iPhone e iPad.
android-chrome-192x192.png e 512x512.png, mais um ícone maskable que o Android pode recortar em círculo ou quadrado arredondado sem cortar o seu desenho.
site.webmanifest com o nome e as cores do site, para instalá-lo como app.
favicon.svg quando você começa com um SVG, para que navegadores modernos mostrem um ícone nítido em qualquer tamanho.

Bom saber

Um favicon legível a 16 pixels

Uma aba mostra o ícone com 16 pixels, mais ou menos o tamanho de uma letra. Nesse tamanho, detalhes finos e palavras longas somem: use um símbolo simples, de uma a três letras ou a parte mais reconhecível do seu logo. Um bom contraste ajuda, e um fundo preenchido mantém o ícone visível em abas claras e escuras. A ferramenta avisa quando uma imagem é pequena demais ou as letras ficam difíceis de ler.

Ferramentas relacionadas

Mais para o seu site

FAQ

Perguntas sobre favicons.

Qual deve ser o tamanho de um favicon?

Não existe um único tamanho: os navegadores usam 16 e 32 pixels nas abas, o Windows 48 pixels, os iPhones 180 pixels e o Android 192 e 512 pixels. Comece com uma imagem de pelo menos 512 pixels, ou um SVG, e esta ferramenta cria todos.

Como adiciono um favicon ao meu site?

Envie os arquivos do ZIP para o seu site, normalmente para a pasta principal, e cole o HTML mostrado aqui no <head> de cada página. Se colocar os arquivos em outra pasta, informe-a em Dados do site e o HTML se ajusta.

Ainda preciso do favicon.ico?

Sim, vale a pena incluir. Alguns navegadores, leitores de feed e ferramentas pedem /favicon.ico diretamente, sem ler o seu HTML. O arquivo criado aqui reúne imagens de 16, 32 e 48 pixels em um só arquivo.

O que é um ícone maskable?

O Android mostra ícones de apps em formatos diferentes, como círculos ou quadrados arredondados, dependendo do celular. Um ícone maskable tem espaço extra em volta do desenho, para que o recorte em qualquer desses formatos nunca corte o seu logo. A pré-visualização do Android o mostra recortado em círculo.

Por que o meu favicon não muda no navegador?

Os navegadores guardam favicons por muito tempo. Depois do envio, abra o endereço do ícone diretamente, recarregue com Ctrl+F5 ou Shift+recarregar, ou tente uma janela anônima. Mudar o nome do arquivo, ou acrescentar ?v=2 aos links, faz todos os navegadores carregarem o novo.

Minhas imagens são enviadas?

Não. Os ícones são desenhados no seu navegador a partir da sua imagem ou das suas letras. A imagem, os ícones e os dados do site nunca são enviados a lugar nenhum.