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

.

Quando os usuários do Safari para iOS adicionam apps da Web progressivos (PWAs, na sigla em inglês) às telas iniciais, o ícone que aparece é chamado de ícone do Apple Touch. É possível especificar qual ícone o app vai 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 vai 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 mais refinada para o usuário.

Como a auditoria de ícone de toque da Apple no Lighthouse falha

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 do Apple touch

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