Apple Touch ikona skaidri norāda attēlu, kas jāizmanto, kad apmeklētājs pievieno vietni iPhone sākuma ekrānam. Tā ir atsevišķa no pārlūka cilnes favicon un tīmekļa lietotnes manifestā norādītajām ikonām.
Tikai viens izmērs: 180×180
180×180 pikseļus bieži izmanto kā augstas izšķirtspējas avotu. iOS šo attēlu var samazināt mazākām attēlošanas vietām, tādēļ vairumam projektu pietiek ar vienu deklarāciju.
Vecākos ieteikumos bija astoņi faili no 57×57 līdz 152×152, katrs ar savu sizes atribūtu. Šie varianti vairs nav vajadzīgi: tie palielina HTML un rada papildu pieprasījumus ar identisku rezultātu.
Failam jābūt PNG. Šai ikonai iOS nelasa ne SVG, ne WebP, bet JPEG sabojā plakanu grafisku elementu asās malas.
Izvēlieties necaurspīdīgu fonu
Caurspīdīgs fons atkarībā no versijas un attēlošanas vietas var dot negaidītu rezultātu. Lai noteiktu ikonas izskatu sākuma ekrānā, piedāvājiet attēlu uz paša izvēlēta necaurspīdīga fona.
Risinājums ir pirms eksportēšanas apvienot ikonu ar necaurspīdīgu fonu. Izvēlieties zīmola krāsu vai vienkārši baltu, ja simbols ir krāsains, un atstājiet apmēram 10% brīvas vietas ap attēlu, lai tas neizskatītos saspiests.
Taču nenoapaļojiet stūrus pats: iOS uzliek savu noapaļoto masku. Jau noapaļots fails rada dubultu rādiusu ar neglītiem stūriem.
Ievietojamais tags
Pietiek ar vienu rindu lapu sadaļā head: link rel="apple-touch-icon" href="/apple-touch-icon.png". Ja piedāvājat vienu failu, sizes atribūts nav obligāts.
Pēc izvēles pievienojiet meta name="apple-mobile-web-app-title" content="Your brand", lai noteiktu zem ikonas redzamo nosaukumu. Bez šī taga iOS izmanto lapas virsrakstu, kas parasti ir pārāk garš un tiek apgriezts.
Ievietojiet arī faila kopiju saknē ar nosaukumu apple-touch-icon.png: tāpat kā favicon.ico, iOS meklē to šajā adresē, ja tags nav atrasts.
Kāpēc ikona neatjauninās
iOS ikonas agresīvi saglabā kešatmiņā, un sākuma ekrānam jau pievienota saīsne pati nemainās. Lai pārbaudītu jaunu versiju, izdzēsiet saīsni, notīriet Safari datus un pievienojiet vietni vēlreiz.
Ja ikonas joprojām nav, pārbaudiet trīs lietas: fails atgriež 200, nevis 404, tam ir satura tips image/png, un to nebloķē robots.txt noteikums vai autentifikācija.
LFFavicon pārbaudes rīks pārbauda tieši šos gadījumus jebkurā publiskā URL un parāda reāli iegūto ikonu.
Pirmavoti
Bieži uzdotie jautājumi
Vai nepieciešami vairāki apple-touch-icon izmēri?
Vairumam projektu viens augstas izšķirtspējas 180×180 fails ļauj iOS izveidot mazākus attēlojumus. Pārbaudiet ierīces, kuras ietilpst jūsu atbalsta prasībās.
Vai Android izmanto apple-touch-icon?
Chrome Android ierīcēs var to izmantot kā rezerves variantu, taču vispirms lasa tīmekļa manifesta ikonas. Vienmēr norādiet 192×192 un 512×512 ikonas manifestā; tas ir oficiālais risinājums.
Vai Apple Touch ikonai var izmantot SVG?
Nē, šim tagam iOS sagaida rastra PNG. Paturiet SVG datora pārlūka favicon, kur tas nodrošina asumu un tumšā režīma atbalstu.