Ikona Apple Touch izričito određuje sliku koja se koristi kada posjetitelj doda vašu stranicu na početni zaslon iPhonea. Odvojena je od favicona kartice preglednika i ikona deklariranih u manifestu web aplikacije.
Samo jedna dimenzija: 180×180
180×180 piksela često se koristi kao izvor visoke razlučivosti. iOS može smanjiti tu sliku za manje prikaze pa većini projekata dopušta jednu deklaraciju.
Starije preporuke navodile su osam datoteka, od 57×57 do 152×152, svaku s vlastitim atributom sizes. Te inačice više nemaju svrhu: povećavaju HTML i pokreću dodatne zahtjeve za isti rezultat.
Datoteka mora biti PNG. iOS za ovu ikonu ne čita SVG ni WebP, a JPEG narušava oštre rubove plošne grafike.
Odaberite neprozirnu pozadinu
Prozirna pozadina može dati neočekivan rezultat ovisno o inačici i kontekstu prikaza. Za kontrolu izgleda na početnom zaslonu postavite grafiku na neprozirnu pozadinu po izboru.
Rješenje je spojiti ikonu s neprozirnom pozadinom prije izvoza. Odaberite boju marke ili običnu bijelu ako je simbol šaren te ostavite približno 10 % razmaka oko grafike kako bi imala dovoljno prostora.
Nemojte sami zaobljivati kutove: iOS primjenjuje vlastitu zaobljenu masku. Već zaobljena datoteka daje dvostruki polumjer i ružne kutove.
Oznaka za lijepljenje
Dovoljan je jedan redak u head dijelu stranica: link rel="apple-touch-icon" href="/apple-touch-icon.png". Atribut sizes nije obvezan kada isporučujete samo jednu datoteku.
Po želji dodajte meta name="apple-mobile-web-app-title" content="Your brand" kako biste odredili naziv ispod ikone. Bez te oznake iOS koristi naslov stranice, koji je obično predug pa se skraćuje.
Smjestite i kopiju datoteke u korijen pod nazivom apple-touch-icon.png: kao i favicon.ico, iOS je traži na toj adresi kada ne pronađe oznaku.
Zašto se ikona ne ažurira
iOS snažno predmemorira ikonu, a prečac koji je već na početnom zaslonu ne mijenja se sam. Za provjeru nove inačice izbrišite prečac, očistite podatke Safarija i ponovno dodajte stranicu.
Ako ikona i dalje nedostaje, provjerite tri stvari: datoteka vraća 200 umjesto 404, poslužuje se s vrstom sadržaja image/png i nije blokirana pravilom robots.txt ili autentifikacijom.
Alat za provjeru LFFavicon ispituje upravo te slučajeve na bilo kojem javnom URL-u i prikazuje ikonu koju je stvarno dohvatio.
Primarni izvori
Česta pitanja
Je li potrebno više dimenzija apple-touch-icon?
Za većinu projekata jedna datoteka visoke razlučivosti od 180×180 omogućuje iOS-u manje prikaze. Testirajte uređaje koje vaš projekt podržava.
Koristi li Android apple-touch-icon?
Chrome na Androidu može je koristiti kao zamjenu, ali prvo čita ikone web manifesta. Uvijek deklarirajte ikone 192×192 i 512×512 u manifestu; to je službeni način.
Može li se SVG koristiti kao ikona Apple Touch?
Ne, iOS za tu oznaku očekuje rasterski PNG. SVG zadržite za favicon preglednika na računalu, gdje donosi oštrinu i podršku za tamni način.