MiServe DevTools

Os seus autocolantes

Fixe aqui as ferramentas. Ficam guardadas neste navegador.

Gerador de favicons e ícones de aplicação

Transforme uma imagem num conjunto completo de favicons: favicon.ico, ícones PNG, o Apple touch icon, ícones Android e maskable, um web manifest e o HTML que os liga.

Opções
Ajuste
Fundo
0%
0%

Preenche o Apple touch icon e o ícone maskable, que não podem ser transparentes.

É escrita no manifest e na tag theme-color. Alguns navegadores usam-na para colorir a própria interface.

Aparece por baixo do ícone no ecrã principal, onde cabem cerca de 12 caracteres.

Funciona no seu navegador com WebAssembly. Nada do que cola é enviado.

Sobre esta ferramenta

Que ficheiro usa cada plataforma

Um navegador de computador vai buscar o ícone dos separadores e dos marcadores a <link rel="icon">: normalmente o PNG de 16 píxeis num ecrã normal e o PNG de 32 píxeis num ecrã de alta densidade. Quando uma página não indica nenhum ícone, o navegador pede /favicon.ico.

O iPhone e o iPad usam apple-touch-icon.png, com 180 píxeis, quando alguém adiciona o site ao ecrã principal. O Android e as aplicações web instaladas leem a lista icons do web manifest: 192 píxeis para o ecrã principal, 512 píxeis para o ecrã de arranque e o ícone maskable quando é o launcher a dar forma aos ícones. O mstile-150x150.png serve para os mosaicos das versões antigas do Windows e está incluído para que o conjunto fique completo.

Porque é que o favicon.ico ainda conta

Os navegadores pedem /favicon.ico por iniciativa própria para tudo o que não tem um head HTML que indique um ícone: um PDF, uma imagem ou uma resposta JSON aberta num separador. Os leitores de feeds, os crawlers e outras ferramentas também costumam procurá-lo aí. O formato ICO pode conter vários tamanhos num só ficheiro, e este contém 16, 32 e 48 píxeis, cada um guardado como dados PNG, que o Windows lê desde o Vista e que todos os navegadores atuais leem.

Ícones maskable e a zona segura

Os launchers do Android recortam os ícones das aplicações num círculo, num quadrado de cantos arredondados ou noutra forma. Para sobreviver a isso, um ícone normal costuma ser reduzido e colocado sobre uma placa branca. Um ícone maskable, pelo contrário, cobre o quadrado inteiro com um fundo opaco e mantém tudo o que é importante dentro da zona segura: um círculo centrado cujo diâmetro é 80% da largura do ícone. Tudo o que fica fora desse círculo pode ser cortado.

Esta ferramenta preenche o ícone maskable com a cor de fundo da aplicação e deixa uma margem de pelo menos 14% em cada lado à volta da sua imagem. Verifique a pré-visualização redonda e aumente a margem se um canto da imagem ficar cortado.

A Apple ignora a transparência

O iOS não mantém os píxeis transparentes num ícone do ecrã principal: pinta-os de preto e arredonda ele próprio os cantos. Por isso, o Apple touch icon gerado aqui é sempre opaco e quadrado, preenchido com a cor de fundo da aplicação, com uma margem de pelo menos 8% e sem o raio dos cantos que escolheu.

Como funciona

Os ícones são desenhados pelos pacotes de imagem do Go compilados para WebAssembly, numa thread em segundo plano do seu navegador, com reamostragem Catmull-Rom. Uma imagem de origem muito grande é primeiro reduzida na página, para que cada alteração seja redesenhada depressa. A sua imagem não é enviada.

Perguntas

Que tamanho deve ter a imagem de origem?

Uma imagem quadrada de 512 por 512 píxeis ou mais, de preferência um PNG com fundo transparente. O maior ícone do conjunto tem 512 píxeis, por isso uma origem mais pequena tem de ser ampliada e fica desfocada.

Ainda preciso de um ficheiro favicon.ico?

Sim. Os navegadores recorrem a /favicon.ico sempre que uma página ou um ficheiro não indica nenhum ícone, e alguns crawlers e leitores de feeds também procuram esse ficheiro. Mantenha-o na pasta raiz do site, mesmo que também ligue ícones PNG.

Onde ponho os ficheiros?

Descompacte-os na pasta raiz do site e cole o snippet HTML no head de todas as páginas. O snippet e o manifest usam caminhos que começam na raiz, como /favicon.ico, por isso edite-os se os ficheiros estiverem noutro sítio.

Porque é que o navegador ainda mostra o favicon antigo?

Os navegadores guardam os favicons em cache durante muito tempo. Abra diretamente o endereço do ícone, por exemplo /favicon.ico, e recarregue-o, ou limpe a cache do site. Uma janela privada mostra o que vê um novo visitante.

A minha imagem é enviada?

Não. A imagem é lida pelo seu navegador e todos os ícones são gerados no seu dispositivo com WebAssembly. A ferramenta não faz nenhum pedido de rede com a imagem.

Mais ferramentas de Gráficos