Ikona Apple Touch izrecno določa sliko, ki se uporabi, ko obiskovalec doda vašo stran na začetni zaslon iPhona. Ločena je od ikone zavihka brskalnika in ikon, navedenih v manifestu spletne aplikacije.
Samo ena velikost: 180×180
180×180 slikovnih pik je pogosta velikost izvora visoke ločljivosti. iOS jo lahko pomanjša za manjše prikaze, zato lahko večina projektov ohrani eno samo navedbo.
Starejša priporočila so naštevala osem datotek, od 57×57 do 152×152, vsako z lastnim atributom sizes. Te različice ne služijo več namenu: povečujejo HTML in sprožajo dodatne zahteve za enak rezultat.
Datoteka mora biti PNG. iOS za to ikono ne bere SVG ali WebP, JPEG pa pokvari ostre robove ploskih grafik.
Izberite neprosojno ozadje
Prosojno ozadje lahko glede na različico in okolje prikaza povzroči nepričakovan rezultat. Za nadzor nad videzom začetnega zaslona uporabite grafiko na izbranem neprosojnem ozadju.
Rešitev je združitev ikone z neprosojnim ozadjem pred izvozom. Izberite barvo znamke ali navadno belo, če je simbol barvit, ter pustite približno 10 % odmika okoli grafike, da ima dovolj prostora.
Vogalov ne zaobljajte sami: iOS čeznje doda svojo zaobljeno masko. Že zaobljena datoteka ustvari dvojni polmer in neugledne vogale.
Oznaka za vstavljanje
Zadostuje ena vrstica v head vaših strani: link rel="apple-touch-icon" href="/apple-touch-icon.png". Atribut sizes je neobvezen, če uporabljate eno datoteko.
Po želji dodajte meta name="apple-mobile-web-app-title" content="Your brand", da določite napis pod ikono. Brez te oznake iOS uporabi naslov strani, ki je običajno predolg in zato odrezan.
Kopijo datoteke postavite tudi v koren kot apple-touch-icon.png: podobno kot pri favicon.ico jo iOS poišče na tem naslovu, če ne najde oznake.
Zakaj se ikona noče posodobiti
iOS ikono zelo vztrajno predpomni in bližnjica, ki je že na začetnem zaslonu, se sama ne spremeni. Novo različico preizkusite tako, da odstranite bližnjico, počistite podatke Safarija in stran znova dodate.
Če ikona še vedno manjka, preverite tri stvari: datoteka vrne 200 in ne 404, postrežena je z vrsto vsebine image/png in je ne blokira pravilo robots.txt ali preverjanje pristnosti.
Preverjevalnik LFFavicon pri poljubnem javnem URL-ju preveri natanko te primere in pokaže ikono, ki jo je dejansko pridobil.
Primarni viri
Pogosta vprašanja
Ali potrebujem več velikosti apple-touch-icon?
Za večino projektov ena datoteka visoke ločljivosti 180×180 omogoča, da iOS ustvari manjše prikaze. Preizkusite naprave, ki jih zajema vaša podpora.
Ali Android uporablja apple-touch-icon?
Chrome na Androidu jo lahko uporabi kot nadomestilo, vendar najprej bere ikone spletnega manifesta. Vedno navedite ikoni 192×192 in 512×512 v manifestu: to je uradna pot.
Ali lahko kot ikono Apple Touch uporabim SVG?
Ne, iOS za to oznako pričakuje rastrski PNG. SVG ohranite za ikono namiznega brskalnika, kjer zagotavlja ostrino in podporo temnemu načinu.