Apple Touch-ikonet angir bildet som brukes når en besøkende legger nettstedet til på startskjermen på en iPhone. Det er atskilt fra faviconet i nettleserfanen og ikonene som er angitt i webappmanifestet.
Bare én størrelse: 180×180
180×180 piksler brukes ofte som et høyoppløselig kildebilde. iOS kan skalere det ned til mindre flater, slik at de fleste prosjekter klarer seg med én deklarasjon.
Eldre anbefalinger oppga åtte filer fra 57×57 til 152×152, hver med sitt eget sizes-attributt. Disse variantene har ikke lenger noen hensikt. De gjør HTML-koden større og utløser ekstra forespørsler for samme resultat.
Filen må være PNG. iOS leser verken SVG eller WebP for dette ikonet, og JPEG ødelegger de skarpe kantene i enkel grafikk.
Velg en ugjennomsiktig bakgrunn
En gjennomsiktig bakgrunn kan gi et uventet resultat, avhengig av versjon og visningsflate. For å styre utseendet på startskjermen bør du levere grafikken på en ugjennomsiktig bakgrunn du har valgt selv.
Løsningen er å slå sammen ikonet og en ugjennomsiktig bakgrunn før eksport. Velg en merkevarefarge, eller hvitt hvis symbolet er fargerikt. La det være omtrent 10 % luft rundt grafikken.
Ikke rund av hjørnene selv: iOS legger sin egen avrundede maske oppå. En fil som allerede er avrundet, gir dobbel radius og stygge hjørner.
Koden du skal lime inn
Én linje i head på sidene er nok: link rel="apple-touch-icon" href="/apple-touch-icon.png". sizes-attributtet er valgfritt når du bare har én fil.
Du kan også legge til meta name="apple-mobile-web-app-title" content="Your brand" for å styre teksten under ikonet. Uten denne koden bruker iOS sidetittelen, som vanligvis er for lang og blir avkortet.
Legg også en kopi av filen i rotmappen med navnet apple-touch-icon.png. Som med favicon.ico ser iOS etter filen på denne adressen hvis det ikke finner noen deklarasjon.
Derfor oppdateres ikke ikonet ditt
iOS mellomlagrer ikonet aggressivt, og en snarvei som allerede ligger på startskjermen, endrer seg aldri av seg selv. For å teste en ny versjon må du slette snarveien, tømme Safari-dataene og legge til nettstedet på nytt.
Hvis ikonet fortsatt mangler, sjekk tre ting: filen må svare med 200 og ikke 404, leveres med innholdstypen image/png og ikke blokkeres av en robots.txt-regel eller autentisering.
LFFavicons kontrollverktøy tester akkurat disse forholdene for enhver offentlig nettadresse og viser ikonet som faktisk ble hentet.
Primærkilder
Vanlige spørsmål
Trenger du flere størrelser av apple-touch-icon?
For de fleste prosjekter er én høyoppløselig fil på 180×180 nok til at iOS kan lage mindre varianter. Test enhetene du skal støtte.
Bruker Android apple-touch-icon?
Chrome på Android kan bruke det som reserve, men leser først ikonene i webmanifestet. Angi alltid ikonene på 192×192 og 512×512 i manifestet. Det er den offisielle fremgangsmåten.
Kan du bruke en SVG som Apple Touch-ikon?
Nei, iOS forventer en rasterbasert PNG for dette elementet. Behold SVG-filen til faviconet i nettleseren på datamaskiner, der den gir skarphet og støtte for mørk modus.