Biedt geen geldig Apple-Touch-pictogram

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

Hoe de Lighthouse Apple Touch Icon Audit 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 voeg ik een Apple Touch-pictogram toe?

  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