Utils365

Gerador de favicon online

Crie todos os favicons que seu site precisa a partir de uma imagem.

Relatar um problema com esta ferramenta

Como usar Gerador de favicon

  1. Adicione seu logotipo ou imagem

    Solte um PNG, JPG, WebP, GIF ou SVG na página. Uma imagem quadrada com uma forma simples funciona melhor.

  2. Ajuste a aparência

    Corte em quadrado ou mostre a imagem inteira, escolha um fundo transparente ou colorido, adicione margem e arredonde os cantos. A prévia mostra cada tamanho e uma aba do navegador.

  3. Baixe e adicione o código

    Baixe o ZIP, envie os arquivos para a pasta raiz do seu site e cole as linhas HTML no head das suas páginas.

Por que usar o Utils365

  • O conjunto completo

    favicon.ico com 16, 32 e 48 px dentro, favicons PNG, o ícone Apple touch, ícones Android e site.webmanifest, todos com os nomes que os navegadores esperam.

  • Veja antes de baixar

    Confira como o ícone fica nos tamanhos reais e em abas claras e escuras do navegador, para que detalhes pequenos não se percam.

  • Privacidade garantida

    Tudo acontece no seu navegador, então seu logotipo nunca é enviado a um servidor.

Perguntas frequentes

De quais tamanhos de favicon eu preciso?

Um favicon.ico (16, 32 e 48 px) cobre abas do navegador e favoritos, um ícone Apple touch de 180 px cobre a tela inicial do iPhone e do iPad, e PNGs de 192 e 512 px cobrem o Android e apps web instalados. Esta ferramenta cria todos eles a partir de uma imagem.

ICO, PNG ou SVG: qual formato de favicon usar?

Use os três. O favicon.ico funciona em todo lugar, incluindo navegadores antigos e ferramentas que o procuram automaticamente. Favicons PNG dão resultados nítidos em tamanhos fixos. Um favicon SVG fica nítido em qualquer tamanho; você recebe um quando começa de um SVG.

O que é um apple-touch-icon?

É o ícone que iPhones e iPads usam quando alguém adiciona seu site à tela inicial. Ele tem 180 × 180 px e não pode ser transparente, então é salvo com fundo sólido (branco, se você escolheu transparente). O iOS arredonda os cantos sozinho.

Onde coloco os arquivos do favicon?

Descompacte-os na pasta raiz do seu site, ao lado da página inicial, para que o favicon.ico fique em seusite.com/favicon.ico. Depois cole as linhas HTML mostradas nesta página na seção head de todas as páginas, ou no template do seu site.

Por que meu novo favicon não aparece?

Os navegadores guardam favicons por muito tempo. Abra o endereço do favicon diretamente, faça uma atualização forçada ou tente uma janela anônima para ver o novo.