Quando os usuários do Safari no iOS adicionam Progressive Web Apps (PWAs) à
tela inicial, o ícone exibido é chamado de ícone de toque da Apple.
É possível especificar qual ícone o app precisa usar incluindo uma tag
<link rel="apple-touch-icon" href="/example.png">
no <head>
da
página. Se a página não tiver essa tag de link, o iOS gerará um ícone fazendo uma captura de tela do conteúdo da página. Em outras palavras, instruir o iOS a fazer o download de um ícone resulta em uma experiência do usuário mais refinada.
O motivo da falha na auditoria do ícone de toque da Apple do Lighthouse
O Lighthouse
sinaliza páginas sem uma tag <link rel="apple-touch-icon" href="/example.png">
no <head>
:
O Lighthouse não verifica se o ícone realmente existe ou se ele tem o tamanho correto.
Como adicionar um ícone de toque da Apple
Adicione
<link rel="apple-touch-icon" href="/example.png">
a<head>
da sua página:<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …
Substitua
/example.png
pelo caminho real para o ícone.
Para oferecer uma boa experiência ao usuário, verifique se:
- O ícone tem 180 x 180 pixels ou 192 x 192 pixels.
- O caminho especificado para o ícone é válido
- O plano de fundo do ícone não é transparente