O ícone Apple Touch fornece explicitamente a imagem usada quando um visitante adiciona o seu site ao ecrã principal do iPhone. É distinto do favicon do separador e dos ícones declarados no manifesto web.
Um único tamanho: 180×180
180×180 píxeis é a dimensão habitualmente usada para fornecer uma imagem de alta definição. O iOS consegue reduzi-la para espaços menores, o que permite manter uma única declaração na maioria dos projetos.
As recomendações antigas listavam oito ficheiros, de 57×57 a 152×152, com uma etiqueta sizes para cada um. Estas variantes já não são necessárias: tornam o HTML mais pesado e provocam pedidos adicionais para o mesmo resultado visual.
O ficheiro deve ser um PNG. O iOS não lê SVG nem WebP para este ícone, e um JPEG perde a nitidez das áreas de cor uniforme.
Preferir um fundo opaco
Um fundo transparente pode produzir um resultado inesperado consoante a versão e o contexto de apresentação. Para controlar o aspeto do ícone do ecrã principal, forneça uma composição com um fundo opaco à sua escolha.
A solução é juntar o ícone a um fundo opaco antes de exportar. Escolha uma cor da marca ou um branco puro se o símbolo for colorido, e adicione uma margem de cerca de 10% à volta do desenho para lhe dar espaço.
Não precisa de arredondar os cantos: o iOS aplica a sua própria máscara arredondada. Um ficheiro já arredondado produz um duplo arredondamento, com cantos pouco elegantes.
A etiqueta a colar
Basta uma linha no head das páginas: link rel="apple-touch-icon" href="/apple-touch-icon.png". O atributo sizes é opcional quando fornece apenas um ficheiro.
Pode acrescentar meta name="apple-mobile-web-app-title" content="A sua marca" para controlar o texto apresentado por baixo do ícone. Sem esta etiqueta, o iOS usa o título da página, muitas vezes demasiado longo, e corta-o.
Coloque também uma cópia do ficheiro na raiz com o nome apple-touch-icon.png: tal como acontece com favicon.ico, o iOS procura-o nesse endereço quando não encontra uma etiqueta.
Porque não é atualizado o seu ícone
O iOS guarda o ícone em cache de forma agressiva, e um atalho já colocado no ecrã principal nunca muda sozinho. Para testar uma nova versão, elimine o atalho, limpe os dados do Safari e volte a adicionar o site.
Se o ícone continuar ausente, verifique três pontos: o ficheiro responde com 200 e não com 404, é servido com o tipo image/png e não está bloqueado por uma regra do robots.txt ou por autenticação.
O verificador de favicon do LFFavicon testa exatamente estes casos em qualquer URL público e apresenta o ícone realmente obtido.
Fontes primárias
Perguntas frequentes
São necessários vários tamanhos de apple-touch-icon?
Na maioria dos projetos, um ficheiro de alta definição de 180×180 permite ao iOS produzir as versões menores. Teste os dispositivos incluídos nos seus requisitos de compatibilidade.
O Android usa o apple-touch-icon?
O Chrome no Android pode usá-lo como último recurso, mas lê primeiro os ícones do manifesto web. Declare sempre os ícones de 192×192 e 512×512 no manifesto: é o método oficial.
É possível usar um SVG como ícone Apple Touch?
Não, o iOS espera um PNG rasterizado para esta etiqueta. Reserve o SVG para o favicon dos navegadores de computador, onde oferece nitidez e suporte do modo escuro.