Biedt geen geldig Apple-Touch-pictogram

Wanneer iOS Safari-gebruikers Progressive Web Apps (PWA's) aan hun startschermen toevoegen, wordt het pictogram dat verschijnt het Apple Touch-pictogram genoemd. U kunt opgeven welk pictogram uw app moet gebruiken door een <link rel="apple-touch-icon" href="/example.png"> tag op te nemen in de <head> van uw pagina. Als uw pagina deze linktag niet heeft, genereert iOS een pictogram door een screenshot te maken van de pagina-inhoud. Met andere woorden: het instrueren van iOS om een ​​pictogram te downloaden resulteert in een meer gepolijste gebruikerservaring.

Hoe de Lighthouse Apple-aanraakpictogramaudit mislukt

Lighthouse markeert pagina's zonder een <link rel="apple-touch-icon" href="/example.png"> tag in de <head> :

Biedt geen geldig Apple-Touch-pictogram

Lighthouse controleert niet of het pictogram daadwerkelijk bestaat en of het pictogram de juiste grootte heeft.

Hoe u een Apple Touch-pictogram kunt toevoegen

  1. Voeg <link rel="apple-touch-icon" href="/example.png"> toe aan de <head> van uw pagina:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        …
        <link rel="apple-touch-icon" href="/example.png">
        …
      </head>
      …
    
  2. Vervang /example.png door het daadwerkelijke pad naar uw pictogram.

Om een ​​goede gebruikerservaring te bieden, moet u ervoor zorgen dat:

  • Het pictogram is 180x180 pixels of 192x192 pixels
  • Het opgegeven pad naar het pictogram is geldig
  • De achtergrond van het pictogram is niet transparant

Bronnen