Apple Touch Icon: Tamanho, Tag e Comportamento no iOS
Um apple touch icon é a imagem que o iOS usa quando alguém adiciona o seu site à Tela de Início pelo Safari. Você o entrega como um único PNG de 180x180 em /apple-touch-icon.png e aponta para ele com uma tag de link usando rel="apple-touch-icon". O iOS ignora a transparência nessa imagem e a compõe sobre preto, então dê a ela um fundo opaco, e deixe o iOS aplicar os cantos arredondados em vez de embuti-los.
O que o iOS faz com ele
Quando um usuário toca em Compartilhar e depois em Adicionar à Tela de Início no Safari, o iOS precisa de um ícone de launcher. Ele procura por uma tag de link com rel="apple-touch-icon", e se não houver nenhuma, solicita /apple-touch-icon.png e /apple-touch-icon-precomposed.png diretamente da raiz do site. Se não encontrar nada, recorre a uma captura de tela da página, que nunca parece intencional.
A imagem que você fornece é quadrada e ocupa toda a área. O iOS aplica sua própria máscara de cantos arredondados ao desenhar o ícone, então uma imagem de origem com os cantos já arredondados acaba com arredondamento duplo e artefatos visíveis nas bordas.
A tag
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Uma tag e um arquivo é toda a configuração moderna. Sirva o mesmo arquivo em /apple-touch-icon.png para que o caminho de fallback sem tag também funcione.
O que entregar
| Item | Valor |
|---|---|
| Dimensões | 180x180 pixels |
| Formato | PNG, sem necessidade de alfa |
| Caminho | /apple-touch-icon.png |
| Fundo | Opaco: a transparência é composta sobre preto |
| Cantos | Origem quadrada; o iOS mascara os cantos por conta própria |
| Margem de segurança | Mantenha a marca afastada dos poucos por cento externos para que a máscara não a corte |
Perguntas frequentes sobre apple touch icon
Preciso de todos os nove tamanhos legados do apple-touch-icon?
Não. O iOS atual usa o 180x180 e o reduz para contextos menores. As variantes 57, 60, 72, 76, 114, 120, 144 e 152 só importam para iPhones e iPads muito antigos.
O que é apple-touch-icon-precomposed?
Um opt-out legado. O iOS antigo adicionava um brilho lustroso aos ícones da tela inicial, e a variante precomposed dizia para não fazê-lo. O iOS parou de adicionar o brilho há anos, então o simples rel="apple-touch-icon" é tudo que você precisa.
O Android usa o apple-touch-icon?
O Chrome no Android vai usá-lo como fallback se o seu site não tiver ícones no web app manifest, mas não é algo em que confiar. Declare PNGs de 192x192 e 512x512 no manifest para o Android e deixe o apple-touch-icon servir o iOS.