Het Apple Touch-pictogram levert expliciet de afbeelding die wordt gebruikt wanneer een bezoeker je site aan het startscherm van een iPhone toevoegt. Het staat los van de favicon in browsertabbladen en de pictogrammen in het webappmanifest.
Eén afmeting: 180×180
180×180 pixels wordt vaak gebruikt als bron met hoge resolutie. iOS kan deze afbeelding verkleinen voor kleinere weergaven, zodat de meeste projecten met één declaratie kunnen volstaan.
Oudere aanbevelingen noemden acht bestanden, van 57×57 tot 152×152, elk met een eigen sizes-attribuut. Die varianten zijn niet meer nodig: ze maken je HTML langer en veroorzaken extra verzoeken voor hetzelfde resultaat.
Het bestand moet een PNG zijn. iOS leest geen SVG of WebP voor dit pictogram en JPEG tast de scherpe randen van vlakke illustraties aan.
Kies bij voorkeur een ondoorzichtige achtergrond
Een transparante achtergrond kan onverwachte resultaten geven, afhankelijk van de versie en weergavecontext. Gebruik een zelfgekozen ondoorzichtige achtergrond om de weergave op het startscherm te bepalen.
De oplossing is om het pictogram vóór het exporteren met een ondoorzichtige achtergrond samen te voegen. Kies een merkkleur of wit bij een kleurrijk symbool en laat ongeveer 10% ruimte rondom het ontwerp.
Rond de hoeken niet zelf af: iOS legt er een eigen afgerond masker overheen. Een bestand met al afgeronde hoeken krijgt een dubbele radius en lelijke hoeken.
De tag om te plakken
Eén regel in de head van je pagina's volstaat: link rel="apple-touch-icon" href="/apple-touch-icon.png". Het sizes-attribuut is optioneel als je één bestand aanbiedt.
Voeg desgewenst meta name="apple-mobile-web-app-title" content="Your brand" toe om het label onder het pictogram te bepalen. Zonder die tag gebruikt iOS de paginatitel, die doorgaans te lang is en wordt afgekapt.
Plaats ook een kopie als apple-touch-icon.png in de hoofdmap: net als bij favicon.ico zoekt iOS op dat adres wanneer het geen tag vindt.
Waarom je pictogram niet wordt bijgewerkt
iOS houdt het pictogram hardnekkig in de cache en een bestaande snelkoppeling op het startscherm verandert niet vanzelf. Verwijder de snelkoppeling, wis de Safari-gegevens en voeg de site opnieuw toe om een nieuwe versie te testen.
Als het pictogram blijft ontbreken, controleer dan drie dingen: het bestand geeft status 200 en geen 404 terug, het wordt aangeboden met inhoudstype image/png en het wordt niet geblokkeerd door een robots.txt-regel of authenticatie.
De LFFavicon-controletool test precies deze situaties voor elke openbare URL en toont het daadwerkelijk opgehaalde pictogram.
Primaire bronnen
Veelgestelde vragen
Heb je meerdere apple-touch-icon-afmetingen nodig?
Voor de meeste projecten is één bestand van 180×180 met hoge resolutie genoeg om iOS kleinere weergaven te laten maken. Test de apparaten die je wilt ondersteunen.
Gebruikt Android de apple-touch-icon?
Chrome op Android kan erop terugvallen, maar leest eerst de pictogrammen in het webmanifest. Geef altijd je pictogrammen van 192×192 en 512×512 in het manifest op; dat is de officiële route.
Kun je een SVG als Apple Touch-pictogram gebruiken?
Nee, iOS verwacht bij deze tag een rasterafbeelding in PNG-formaat. Gebruik SVG voor de favicon in de desktopbrowser, waar het scherpte en ondersteuning voor de donkere modus biedt.