Pictograma Apple Touch furnizează explicit imaginea folosită când un vizitator adaugă site-ul tău pe ecranul de pornire al unui iPhone. Rămâne separată de faviconul din fila browserului și de pictogramele declarate în manifestul aplicației web.
O singură dimensiune: 180×180
Dimensiunea de 180×180 pixeli este folosită frecvent ca sursă de înaltă rezoluție. iOS poate micșora imaginea pentru afișări mai mici, permițând majorității proiectelor să păstreze o singură declarație.
Recomandările mai vechi enumerau opt fișiere, de la 57×57 la 152×152, fiecare cu propriul atribut sizes. Aceste variante nu mai sunt utile: încarcă HTML-ul și declanșează cereri suplimentare pentru un rezultat identic.
Fișierul trebuie să fie PNG. iOS nu citește nici SVG, nici WebP pentru această pictogramă, iar JPEG strică marginile clare ale desenelor cu culori plate.
Preferă un fundal opac
Un fundal transparent poate produce un rezultat neașteptat, în funcție de versiune și contextul de afișare. Pentru a controla aspectul pe ecranul de pornire, oferă desenul pe un fundal opac ales de tine.
Soluția este să combini pictograma cu un fundal opac înainte de export. Alege o culoare a mărcii sau alb simplu dacă simbolul este colorat și lasă aproximativ 10% spațiu în jurul desenului, ca să nu pară înghesuit.
Nu rotunji însă singur colțurile: iOS aplică propria mască rotunjită. Un fișier deja rotunjit produce o rază dublă și colțuri inestetice.
Eticheta de inserat
Este suficientă o linie în head-ul paginilor: link rel="apple-touch-icon" href="/apple-touch-icon.png". Atributul sizes este opțional când livrezi un singur fișier.
Opțional, adaugă meta name="apple-mobile-web-app-title" content="Your brand" pentru a controla eticheta afișată sub pictogramă. Fără această etichetă, iOS folosește titlul paginii, care este de obicei prea lung și apare trunchiat.
Pune și o copie a fișierului la rădăcină sub numele apple-touch-icon.png: la fel ca pentru favicon.ico, iOS îl caută la această adresă dacă nu găsește o etichetă.
De ce pictograma refuză să se actualizeze
iOS păstrează pictograma în cache foarte agresiv, iar o scurtătură aflată deja pe ecranul de pornire nu se schimbă singură. Pentru a testa o versiune nouă, șterge scurtătura, golește datele Safari, apoi adaugă din nou site-ul.
Dacă pictograma continuă să lipsească, verifică trei lucruri: fișierul răspunde cu 200, nu cu 404, este servit cu tipul de conținut image/png și nu este blocat de o regulă robots.txt sau de autentificare.
Verificatorul LFFavicon testează exact aceste cazuri pentru orice URL public și arată pictograma pe care a preluat-o efectiv.
Surse primare
Întrebări frecvente
Ai nevoie de mai multe dimensiuni apple-touch-icon?
Pentru majoritatea proiectelor, un singur fișier de înaltă rezoluție de 180×180 permite iOS să producă afișări mai mici. Testează dispozitivele incluse în lista celor acceptate de proiect.
Android folosește apple-touch-icon?
Chrome pe Android îl poate folosi ca rezervă, dar citește mai întâi pictogramele din manifestul web. Declară întotdeauna pictogramele de 192×192 și 512×512 în manifest: aceasta este calea oficială.
Poți folosi un SVG ca pictogramă Apple Touch?
Nu, iOS așteaptă un PNG raster pentru această etichetă. Păstrează SVG-ul pentru faviconul browserului desktop, unde oferă claritate și compatibilitate cu modul întunecat.