Gerador de favicon (ICO · PNG)

Como usar

1. Escolha uma imagem ou solte-a na caixa. Funciona com PNG, JPEG, WebP, GIF e SVG; uma imagem quadrada de pelo menos 512 × 512 px dá o resultado mais nítido.
2. Ajuste a margem e os cantos arredondados, e escolha um fundo transparente ou de cor. A lista abaixo é atualizada a cada mudança.
3. Digite um nome de app se quiser incluí-lo no site.webmanifest. É o nome exibido quando o site é adicionado à tela inicial do celular.
4. Clique em “Baixar tudo (ZIP)” ou baixe os arquivos um a um pela lista.
5. Envie os arquivos para a pasta raiz do seu site e cole as tags de “Tags para o <head>” dentro do <head> das suas páginas.

Perguntas frequentes

Minha imagem é enviada?

Não. O redimensionamento e o empacotamento acontecem só no seu navegador.

Quais arquivos vêm no pacote?

favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html. O arquivo HTML contém as tags para colar.

Por que o apple-touch-icon.png tem fundo mesmo escolhendo transparente?

O iOS preenche as áreas transparentes de preto e arredonda os cantos sozinho. Por isso este ícone sempre recebe um fundo sólido (branco quando transparente está selecionado) e não tem cantos arredondados.

Minha imagem não é quadrada. O que acontece?

Ela é redimensionada mantendo a proporção e centralizada, com espaço vazio nos lados menores. Recorte em quadrado antes se quiser que ela preencha o ícone.

O ícone fica borrado em 16 px.

Em 16 × 16 px, detalhes finos e textos pequenos somem. Use uma forma simples ou uma ou duas letras, e diminua a margem.

O navegador continua mostrando o ícone antigo.

Os navegadores guardam o favicon em cache por muito tempo. Recarregue limpando o cache ou adicione uma versão ao link, por exemplo /favicon.ico?v=2.