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

Quando os usuários do iOS Safari adicionam Progressive Web Apps (PWAs) aos na tela inicial, o ícone exibido é chamado de ícone do Apple Touch. Você pode especificar qual ícone seu aplicativo deve usar, incluindo um Tag <link rel="apple-touch-icon" href="/example.png"> em <head> do seu página. Se sua página não tiver essa tag de link, o iOS gerará um ícone fazendo uma captura de tela do o conteúdo da página. Em outras palavras, instruir o iOS a fazer o download de um ícone resulta em um resultado experiência do usuário.

Como é reprovada a auditoria do ícone de toque da Apple no Lighthouse

Farol sinaliza páginas sem um <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 é do tamanho correto.

Como adicionar um ícone do Apple Touch

  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 do ícone.

.

Para oferecer uma boa experiência do 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