Um favicon precisa se comportar bem em vários lugares ao mesmo tempo: aba do navegador, favoritos, tela inicial do iOS e, cada vez mais, como ícone de um app instalado a partir do navegador no Android — cada contexto exige seu próprio tamanho e formato de arquivo.
Ícones "maskable": o formato que o Android recorta sozinho
No Android, quando um site é instalado como aplicativo, o sistema pode recortar o ícone em formatos diferentes — círculo, quadrado arredondado, gota — dependendo do fabricante do aparelho. Por isso o site.webmanifest aceita ícones marcados como "purpose": "maskable", com uma margem de segurança ao redor do desenho principal para que o recorte automático não corte partes importantes da imagem.
O papel das tags <link> no <head>
Cada formato de ícone é vinculado com sua própria tag <link rel="icon"> ou <link rel="apple-touch-icon"> junto com um atributo sizes que indica suas dimensões, para o navegador escolher a opção mais adequada ao contexto de exibição.
Apple Touch Icon: a exigência própria do iOS
O iOS ignora o favicon.ico na tela inicial e espera um PNG quadrado de 180×180 referenciado por <link rel="apple-touch-icon"> — uma convenção da própria Apple, sem transparência, já que o sistema aplica cantos arredondados por conta própria.
Para que serve
- Gerar um conjunto completo de ícones nos tamanhos necessários a partir de uma única imagem de origem.
- Obter o código HTML das tags <link> pronto para colar no <head>.
- Garantir que o site fique correto ao ser adicionado à tela inicial de um dispositivo móvel, inclusive com ícones adaptáveis no Android.