O apple-touch-icon fornecido não é válido

Published on Updated on

Translated to: English, Español, 한국어

Quando os usuários do Safari do iOS adicionam Progressive Web Apps (PWAs) à tela inicial, o ícone exibido é chamado de ícone Apple Touch (Apple touch icon). É possível especificar o ícone usado pelo app com a inclusão de uma tag <link rel="apple-touch-icon" href="/example.png"> no <head> da página. Se a página não apresentar essa tag de link, o iOS faz uma captura de tela do conteúdo para gerar um ícone. Em outras palavras, instruir o iOS a fazer o download de um ícone resulta em uma experiência do usuário mais otimizada.

Como a auditoria de ícone Apple Touch do Lighthouse falha

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

O apple-touch-icon fornecido não é válido

O link rel="apple-touch-icon-precomposed" é aprovado pela auditoria, mas está obsoleto desde o iOS 7. Em vez disso, use rel="apple-touch-icon".

O Lighthouse não verifica se o ícone realmente existe ou se o tamanho dele está correto.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

Como adicionar um ícone 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.

Codelab

Confira o codelab Como adicionar um ícone Apple Touch ao Progressive Web App para ver como o ícone oferece uma experiência do usuário mais otimizada.

Para fornecer uma boa experiência do usuário, verifique o seguinte:

  • O ícone tem 180 x 180 ou 192 x 192 pixels.
  • O caminho especificado do ícone é válido.
  • O plano de fundo do ícone não é transparente.

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.