Gerador de favicon: crie favicon.ico, PNG e ícones Apple Touch
Crie favicon.ico, favicons PNG, um ícone Apple Touch e um manifesto de web app a partir de uma imagem ou texto no navegador, com as tags HTML para copiar.
Solte uma imagem aqui ou escolha uma
PNG, JPG, WebP, GIF (primeiro quadro), BMP ou SVG. Uma imagem quadrada de pelo menos 512 × 512 pixels funciona melhor.
O texto é desenhado com as fontes instaladas neste dispositivo, então letras e emojis podem ficar diferentes em outro computador ou celular. Os arquivos PNG e ICO baixados mantêm a aparência que você vê aqui.
Pré-visualização
Os tamanhos 16, 32 e 48 são exibidos no tamanho real; os ícones maiores aparecem reduzidos. O padrão quadriculado indica as áreas transparentes.
Em uma aba do navegador
Uma barra de abas simplificada nos temas claro e escuro. Verifique se o ícone fica visível nos dois: um logotipo escuro com fundo transparente pode sumir em uma barra de abas escura.
Arquivos
Alguns dispositivos Apple mostram em preto as partes transparentes de um ícone da tela de início, então o apple-touch-icon.png é salvo sem transparência: as áreas transparentes são preenchidas com esta cor. A configuração de forma não se aplica a ele, porque o iPhone e o iPad arredondam por conta própria os cantos dos ícones da tela de início.
Usada nas tags HTML e no manifesto. "/" significa a pasta raiz do site.
As configurações de fundo, forma, margem interna e recorte não se aplicam ao favicon.svg.
Os navegadores podem usar a cor do tema para colorir a barra de endereço ou o título da janela. A cor de fundo do app é exibida enquanto um web app instalado é iniciado.
Escolha uma imagem ou mude para texto para começar.
Conteúdo do site.webmanifest
Observações
- Envie os arquivos para a pasta raiz do seu site (a pasta que contém a página inicial) ou informe outra pasta acima para que os caminhos no HTML e no manifesto correspondam.
- O favicon.ico contém imagens de 16 × 16, 32 × 32 e 48 × 48 armazenadas como dados PNG. Os navegadores atuais e o Windows Vista ou posterior conseguem ler esse formato; alguns programas muito antigos só leem imagens de ícone sem compressão.
- Imagens de origem pequenas, como uma de 64 × 64, são ampliadas para os ícones maiores e ficam borradas. Se puder, use uma imagem de pelo menos 512 × 512 pixels ou um arquivo SVG.
- Ícones de texto usam as fontes instaladas no dispositivo em que você os cria. Os arquivos PNG e ICO mantêm essa aparência, mas criar o ícone de novo em outro dispositivo pode dar um resultado diferente.
- Os arquivos SVG são desenhados pelo seu navegador. Imagens, fontes ou estilos que um arquivo SVG carrega de outros arquivos ou sites não são carregados e podem ficar faltando nos ícones.
- Os navegadores guardam os favicons em cache por muito tempo. Depois que você substitui um favicon, o antigo ainda pode aparecer por um tempo; uma atualização forçada, uma janela anônima ou um nome de arquivo diferente no HTML podem ajudar.
- Imagens e textos são processados no seu navegador e não são enviados à LeedyBox.
Como usar
- Escolha Imagem e selecione ou solte seu logotipo, ou escolha Texto ou emoji e digite até três caracteres.
- Defina o fundo, a forma e a margem interna e confira as pré-visualizações e a aba do navegador nos temas claro e escuro.
- Se quiser, informe o nome do site, o nome curto, a cor do tema e a pasta em que os arquivos ficarão.
- Clique em "Criar arquivos de favicon" e baixe os arquivos um a um ou todos juntos como favicon-package.zip.
- Envie os arquivos para o seu site e cole as tags HTML copiadas na seção head das suas páginas.
Perguntas frequentes
Minhas imagens são enviadas a um servidor?
Não. A imagem ou o texto é desenhado e convertido no seu navegador, e os arquivos são criados no seu dispositivo. Nada é enviado à LeedyBox. Só a biblioteca ZIP é baixada quando a página carrega, do próprio leedybox.com.
Quais imagens posso usar e há limites?
Arquivos PNG, JPG, WebP, GIF (primeiro quadro), BMP e SVG. Arquivos SVG podem ter até 10 MB. Fotos muito grandes (acima de cerca de 50 megapixels) podem falhar em celulares por causa da memória que exigem. Uma imagem quadrada de pelo menos 512 × 512 pixels, ou um arquivo SVG, dá os resultados mais nítidos.
Por que meu favicon parece borrado ou difícil de ler?
Um ícone de 16 pixels tem muito pouco espaço. Formas simples, contraste forte e uma ou duas letras funcionam melhor que logotipos detalhados ou textos longos. Imagens de origem pequenas são ampliadas para os tamanhos maiores e ficam borradas. Confira as pré-visualizações e tente uma margem interna menor ou uma versão mais simples do seu logotipo.
De quais destes arquivos eu preciso?
O favicon.ico e os arquivos PNG de 16 e 32 pixels são usados pelos navegadores de computador, e o apple-touch-icon.png, pelo iPhone e pelo iPad. Os ícones de 192 e 512 pixels e o site.webmanifest são usados quando o site é adicionado à tela de início ou instalado como web app. Usar todos eles com as tags HTML cobre os casos comuns.
Por que o apple-touch-icon.png não tem transparência?
Alguns dispositivos Apple mostram em preto as partes transparentes de um ícone da tela de início. Por isso, a ferramenta preenche as áreas transparentes com a cor que você escolher (branco por padrão) e deixa os cantos retos, porque o iPhone e o iPad os arredondam.