OpenTools

Gerador de favicon — favicon.ico e conjunto de ícones de app

Cria o ícone em todos os tamanhos usados em separadores do navegador, no ecrã principal do telemóvel e nos resultados de pesquisa, e descarrega tudo num único ZIP.

O ficheiro não é transmitido para o servidor — processado apenas no navegador deste dispositivo

Espessura
Forma
Informação da app (site.webmanifest)
O meu site
Novo separador
16
32
48
180 · iPhone
192 · Android
512
HTML para colar dentro de <head> 
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#3182f6">

Baseado em carregar os ficheiros do ZIP na raiz (/) do site. O mesmo código também está incluído em head.html.

Publicidade

Como usar Criar favicon

  1. 1Carregue uma imagem ou defina o texto/emoji e a cor.
  2. 2Use a pré-visualização para ver o aspeto em cada tamanho.
  3. 3Toque em [Descarregar ZIP] e cole o código HTML indicado dentro de <head>.

Perguntas frequentes

Que tipo de imagem original é melhor?

O ideal é um PNG ou SVG quadrado de 512×512 ou mais. Em tamanhos pequenos, as formas simples destacam-se melhor.

Não basta um único favicon.ico?

Suficiente para navegadores antigos, mas para o ecrã principal do iPhone (180px) e do Android (192/512px) é preciso um PNG separado.

Publicidade