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-aanraakpictogramcontrole 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 u een Apple Touch-pictogram kunt toevoegen
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