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> :
Lighthouse controleert niet of het pictogram daadwerkelijk bestaat en of het pictogram de juiste grootte heeft.
Hoe voeg ik een Apple Touch-pictogram toe?
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> …Vervang
/example.pngdoor 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