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

.

Quando os usuários do Safari no iOS adicionam Progressive Web Apps (PWAs) às telas iniciais, o ícone que aparece é chamado de ícone de toque da Apple. É possível especificar qual ícone seu app deve usar incluindo uma tag <link rel="apple-touch-icon" href="/example.png"> no <head> da sua página. Se a página não tiver essa tag de link, o iOS vai gerar um ícone fazendo uma captura de tela do conteúdo da página. Em outras palavras, instruir o iOS a baixar um ícone resulta em uma experiência do usuário mais refinada.

Como a auditoria de ícones de toque da Apple do Lighthouse falha

O Lighthouse sinaliza páginas sem uma tag <link rel="apple-touch-icon" href="/example.png"> no <head>:

Não informa 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"> ao <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 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