Apple Touch-ikonen anger uttryckligen vilken bild som används när en besökare lägger till din webbplats på hemskärmen på en iPhone. Den är separat från faviconen i webbläsarfliken och ikonerna i webbappsmanifestet.
En enda storlek: 180×180
180×180 pixlar används ofta som högupplöst källbild. iOS kan skala ner bilden för mindre visningsytor, så de flesta projekt klarar sig med en enda deklaration.
Äldre rekommendationer angav åtta filer, från 57×57 till 152×152, var och en med ett eget sizes-attribut. Dessa varianter behövs inte längre: de gör din HTML större och orsakar fler förfrågningar för samma resultat.
Filen måste vara en PNG. iOS läser varken SVG eller WebP för denna ikon, och JPEG försämrar de skarpa kanterna i enkel grafik.
Välj helst en ogenomskinlig bakgrund
En genomskinlig bakgrund kan ge oväntade resultat beroende på version och visningssammanhang. Använd en bild med en vald ogenomskinlig bakgrund för att styra utseendet på hemskärmen.
Lösningen är att slå samman ikonen med en ogenomskinlig bakgrund före export. Välj en varumärkesfärg, eller vitt om symbolen är färgstark, och lämna ungefär 10 procent marginal runt motivet för luft.
Runda däremot inte hörnen själv: iOS lägger på sin egen rundade mask. En fil med redan rundade hörn får dubbel radie och fula hörn.
Taggen att klistra in
En rad i sidornas head räcker: link rel="apple-touch-icon" href="/apple-touch-icon.png". Attributet sizes är valfritt när du bara levererar en fil.
Du kan även lägga till meta name="apple-mobile-web-app-title" content="Ditt varumärke" för att styra texten under ikonen. Utan den taggen använder iOS sidtiteln, som oftast är för lång och kapas.
Lägg också en kopia av filen i roten med namnet apple-touch-icon.png. Precis som med favicon.ico söker iOS på den adressen när ingen tagg hittas.
Därför vägrar ikonen att uppdateras
iOS cachar ikonen hårt och en genväg som redan ligger på hemskärmen ändras inte av sig själv. För att testa en ny version tar du bort genvägen, rensar Safaris data och lägger sedan till webbplatsen igen.
Om ikonen fortfarande saknas kontrollerar du tre saker: att filen svarar med 200 och inte 404, att den levereras med innehållstypen image/png och att den inte blockeras av robots.txt eller autentisering.
LFFavicons kontrollverktyg testar just dessa fall för valfri offentlig webbadress och visar den ikon som faktiskt hämtades.
Primärkällor
Vanliga frågor
Behövs flera storlekar av apple-touch-icon?
För de flesta projekt kan iOS skapa mindre versioner från en högupplöst fil på 180×180. Testa de enheter som projektet ska stödja.
Använder Android apple-touch-icon?
Chrome på Android kan använda den som reserv, men läser först ikonerna i webbmanifestet. Deklarera alltid dina ikoner på 192×192 och 512×512 i manifestet. Det är den officiella metoden.
Kan SVG användas som Apple Touch-ikon?
Nej, iOS förväntar sig en rasterbild i PNG-format för den här taggen. Behåll SVG för faviconen i datorns webbläsare, där den ger skärpa och stöd för mörkt läge.