Não fornece um ícone de toque da Apple válido

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>:

Não fornece um apple-touch-icon válido

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

  1. 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>
  …

  2. 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

Recursos