Ícone de App: Como Ele Difere de um Favicon
Um ícone de app é a imagem que representa um app instalado em uma tela inicial, launcher, dock ou alternador de apps, ao contrário de um favicon, que representa um site dentro de um navegador. Na web, a mesma arte serve para ambos: o iOS pega o ícone de app da tag de link apple-touch-icon, enquanto o Android e os PWAs de desktop o pegam do array icons no web app manifest. Cada plataforma o recorta e o mascara em seu próprio formato, então a arte precisa ser desenhada para sobreviver a isso.
Mesma arte, trabalho diferente
Um favicon vive dentro da interface do navegador, a 16 a 32 pixels, ao lado de um título de página que carrega a maior parte do significado. Um ícone de app vive em uma tela inicial a 100 pixels ou mais, sozinho, ao lado de uma dúzia de concorrentes, e é a única coisa que identifica você. Ele ganha mais espaço e mais escrutínio.
A diferença prática está em de onde a plataforma o lê e o que faz com ele depois. Os navegadores desenham um favicon como fornecido. Os sistemas operacionais recortam os ícones de app em um formato, adicionam uma sombra e às vezes os tingem ou os escurecem, então uma marca que vai até a borda do canvas acaba cortada.
De onde cada plataforma lê o ícone de app
| Plataforma | Origem | Tamanho a entregar |
|---|---|---|
| iOS / iPadOS | link rel="apple-touch-icon" | PNG 180x180, opaco |
| Android | Array icons do manifest | PNG 192x192 e 512x512 |
| PWA de desktop | Array icons do manifest | PNG 512x512 |
| Máscara de formato do launcher Android | Entrada do manifest com purpose maskable | PNG 512x512, zona de segurança de 80% |
| Atalho do Windows | favicon.ico | Entrada 48x48 |
As duas declarações que importam
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">O iOS lê a primeira, o Android e os PWAs de desktop leem o array icons no arquivo referenciado pela segunda. Entre elas, cobrem toda superfície de app instalado.
Perguntas frequentes sobre ícone de app
Preciso de artes separadas para o ícone de app e para o favicon?
Geralmente não artes separadas, mas muitas vezes um tratamento separado. O ícone de app quer um fundo preenchido e espaçamento generoso; o favicon quer a marca o maior e mais simples possível. Mesmo logotipo, duas exportações.
Por que o ícone da minha tela inicial parece uma captura de tela?
O iOS recorre a uma captura de tela da página quando não encontra nenhuma tag de link apple-touch-icon nem nenhum /apple-touch-icon.png na raiz do site. Adicionar qualquer um dos dois resolve, embora o ícone antigo possa persistir até que o atalho seja readicionado.
Qual tamanho a arte de origem deve ter?
1024x1024 ou maior, quadrada, sem cantos arredondados embutidos. Todo tamanho de plataforma reduz de forma limpa a partir dela, e as plataformas aplicam seus próprios formatos de canto.