Apple Touch-ikonet angiver udtrykkeligt det billede, der bruges, når en besøgende føjer dit website til hjemmeskærmen på en iPhone. Det er fortsat adskilt fra browserfanens favicon og ikonerne i webappmanifestet.
Kun én størrelse: 180×180
180×180 pixels bruges almindeligvis som kilde i høj opløsning. iOS kan nedskalere billedet til mindre visninger, så de fleste projekter kan nøjes med én angivelse.
Ældre anbefalinger opregnede otte filer fra 57×57 til 152×152, hver med sin egen sizes-attribut. Disse varianter har ikke længere noget formål: de fylder i din HTML og udløser ekstra anmodninger for samme resultat.
Filen skal være en PNG. iOS læser hverken SVG eller WebP til dette ikon, og en JPEG ødelægger de skarpe kanter i flad grafik.
Vælg helst en ugennemsigtig baggrund
En gennemsigtig baggrund kan give et uventet resultat afhængigt af version og visningssammenhæng. Vil du styre udseendet på hjemmeskærmen, skal du levere grafikken på en selvvalgt, ugennemsigtig baggrund.
Løsningen er at samle ikonet og en ugennemsigtig baggrund i ét billede før eksport. Vælg en brandfarve eller almindelig hvid, hvis dit symbol er farverigt, og lad omtrent 10% luft stå omkring grafikken.
Afrund dog ikke selv hjørnerne: iOS lægger sin egen afrundede maske ovenpå. En fil med allerede afrundede hjørner giver en dobbelt radius med grimme hjørner.
Tagget, du skal indsætte
Én linje i dine siders head er nok: link rel="apple-touch-icon" href="/apple-touch-icon.png". Attributten sizes er valgfri, når du kun leverer én fil.
Du kan også tilføje meta name="apple-mobile-web-app-title" content="Your brand" for at styre teksten under ikonet. Uden dette tag bruger iOS sidens titel, som ofte er for lang og bliver afkortet.
Læg også en kopi af filen i roden som apple-touch-icon.png: ligesom med favicon.ico søger iOS efter den på denne adresse, når intet tag er angivet.
Derfor vil dit ikon ikke opdateres
iOS cacher ikonet aggressivt, og en genvej, der allerede ligger på hjemmeskærmen, ændrer sig aldrig af sig selv. For at teste en ny version skal du slette genvejen, rydde Safaris data og derefter tilføje websitet igen.
Hvis ikonet stadig mangler, skal du kontrollere tre ting: at filen svarer med 200 og ikke 404, at den leveres med indholdstypen image/png, og at den ikke blokeres af en robots.txt-regel eller godkendelseskrav.
LFFavicons kontrolværktøj undersøger præcis disse tilfælde på enhver offentlig URL og viser det ikon, det faktisk har hentet.
Primære kilder
Ofte stillede spørgsmål
Har man brug for flere størrelser af apple-touch-icon?
I de fleste projekter giver én fil på 180×180 i høj opløsning iOS mulighed for at lave mindre gengivelser. Test de enheder, som projektet skal understøtte.
Bruger Android apple-touch-icon?
Chrome på Android kan bruge det som reserve, men læser først ikonerne i webmanifestet. Angiv altid dine ikoner på 192×192 og 512×512 i manifestet. Det er den officielle metode.
Kan man bruge en SVG som Apple Touch-ikon?
Nej, iOS forventer en raster-PNG til dette tag. Brug SVG til faviconet i computerens browser, hvor formatet giver skarphed og understøttelse af mørk tilstand.